Input currency field
Helpers for currency input
Install
npm install input-currency-field
Use
import currencyField from 'input-currency-field'
const onChangeHandler = (event) => {
const value = event.target.value
if (value === null || value.length < 1) {
return
}
// fill in config with possible options
const config = {
decimalSymbol: ',',
allowedDecimalSymbols: ',.;',
postfix: ' $',
thousandsSeparator: ' ',
}
// apply mask/config to value
const displayValue = currencyField.format(value, config)
// calculate next caret/cursor position
const nextCaretPosition = currencyField.getNextCaretPosition({
value,
displayValue,
postfix: config.postfix,
caretPosition: event.target.selectionStart,
})
// get math-ready value
const mathValue = currencyField.parse(displayValue, config)
// update DOM
event.target.value = displayValue
currencyField.setNextCaretPosition(event.target, nextCaretPosition)
document.getElementById('realValue').value = mathValue
}
document.getElementById('currency').addEventListener('input', onChangeHandler)
❕ Many npm libs cannot, but this js could use custom
- decimal symbol (even range of them)
- postfix
- thousand separator
- onChange event. Use your own! Separating
displayValue
andvalue
with no problem
⚠️ Before you copy and paste into prod
-
onChangeHandler
should be debounced or throttled