I stumbled across this article looking for a similar answer. I read @vsync example Using javascript's Number.prototype.toLocaleString: and it appeared to work well. The only complaint I had was that if you had more than a single input type="currency" within your page it would only modify the first instance of it.
As he mentions in his comments it was only designed as an example for stackoverflow.
However, the example worked well for me and although I have little experience with JS I figured out how to modify it so that it will work with multiple input type="currency" on the page using the document.querySelectorAll rather than document.querySelector and adding a for loop.
I hope this can be useful for someone else. ( Credit for the bulk of the code is @vsync )
var currencyInput = document.querySelectorAll( 'input[type="currency"]' );
for ( var i = 0; i < currencyInput.length; i++ ) {
var currency = 'GBP'
onBlur( {
target: currencyInput[ i ]
} )
currencyInput[ i ].addEventListener( 'focus', onFocus )
currencyInput[ i ].addEventListener( 'blur', onBlur )
function localStringToNumber( s ) {
return Number( String( s ).replace( /[^0-9.-]+/g, "" ) )
}
function onFocus( e ) {
var value = e.target.value;
e.target.value = value ? localStringToNumber( value ) : ''
}
function onBlur( e ) {
var value = e.target.value
var options = {
maximumFractionDigits: 2,
currency: currency,
style: "currency",
currencyDisplay: "symbol"
}
e.target.value = ( value || value === 0 ) ?
localStringToNumber( value ).toLocaleString( undefined, options ) :
''
}
}
var currencyInput = document.querySelectorAll( 'input[type="currency"]' );
for ( var i = 0; i < currencyInput.length; i++ ) {
var currency = 'GBP'
onBlur( {
target: currencyInput[ i ]
} )
currencyInput[ i ].addEventListener( 'focus', onFocus )
currencyInput[ i ].addEventListener( 'blur', onBlur )
function localStringToNumber( s ) {
return Number( String( s ).replace( /[^0-9.-]+/g, "" ) )
}
function onFocus( e ) {
var value = e.target.value;
e.target.value = value ? localStringToNumber( value ) : ''
}
function onBlur( e ) {
var value = e.target.value
var options = {
maximumFractionDigits: 2,
currency: currency,
style: "currency",
currencyDisplay: "symbol"
}
e.target.value = ( value || value === 0 ) ?
localStringToNumber( value ).toLocaleString( undefined, options ) :
''
}
}.input_date {
margin:1px 0px 50px 0px;
font-family: 'Roboto', sans-serif;
font-size: 18px;
line-height: 1.5;
color: #111;
display: block;
background: #ddd;
height: 50px;
border-radius: 5px;
border: 2px solid #111111;
padding: 0 20px 0 20px;
width: 100px;
} <label for="cost_of_sale">Cost of Sale</label>
<input class="input_date" type="currency" name="cost_of_sale" id="cost_of_sale" value="0.00">
<label for="sales">Sales</label>
<input class="input_date" type="currency" name="sales" id="sales" value="0.00">
<label for="gm_pounds">GM Pounds</label>
<input class="input_date" type="currency" name="gm_pounds" id="gm_pounds" value="0.00">