My approach involves utilizing Numeral.js:
Vue.filter('formatNumber', function (value) {
return numeral(value).format('0,0.[000]')
})
Vue.component('input-number', {
template: '\
<div>\
<label v-if="label">{{ label }}</label>\
<input\
ref="input"\
v-bind:value="displayValue(value)"\
v-on:input="updateValue($event.target.value)"\
v-on:focus="selectAll"\
>\
</div>\
',
props: {
value: {
},
label: {
}
},
methods: {
updateValue: function (inputValue) {
var valToSend = inputValue
var numVal = numeral(valToSend).value()
if (isNaN(numVal)) {
valToSend = this.value.toString()
numVal = numeral(valToSend).value()
}
var formattedVal = numeral(numVal).format('0,0.[000]')
this.$refs.input.value = formattedVal + (valToSend.endsWith('.') ? '.' : '')
this.$emit('input', numeral(formattedVal).value())
},
displayValue: function (inputValue) {
return numeral(inputValue).format('0,0.[000]')
},
selectAll: function (event) {
// Workaround for Safari bug
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
setTimeout(function () {
event.target.select()
}, 0)
}
}
})
var app = new Vue({
el: '#app',
data: {
pricePerGram: '160000',
weightInGrams: '1.5',
},
computed: {
totalPrice: function () {
return (this.pricePerGram * this.weightInGrams)
},
toatlWithVat: function () {
return (this.totalPrice *1.09)
}
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff9faeacfbda1baa1beb9">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<div id="app">
<input-number v-model="pricePerGram" label="Price per gram:"></input-number><br />
<input-number v-model="weightInGrams" label="Weight in grams:"></input-number><br />
<div><label>Total price: </label><span dir="ltr">{{totalPrice | formatNumber}}</span></div><br />
<div><label>Total + Vat: </label><span dir="ltr">{{toatlWithVat | formatNumber}}</span></div><br />
</div>Does my implementation meet the requirements? Are there alternative approaches for implementing a numeric-only input?
I am open to enhancing this solution further. While Numeral.js is currently used, it is not obligatory. It's just a library I came across.
Some aspects of the current implementation include:
Supports thousand separators while typing.
Handles decimal points with 3 digits (I aim to enhance this to support an unlimited number of decimal digits. The limitation arises from the format
0,0.[000], as Numeral.js does not seem to offer a format accommodating unlimited decimal digits.)Only accepts numbers, commas, and decimal points (no other characters permitted).
Considering using regular expressions instead of Numeral.js as a potential improvement. Would this be advisable?