JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="num" value="12345" onkeydown="NumericBox_KeyDown(this,event,true,false)" />
JavaScript
function NumericBox_KeyDown(o, e, separate, allowComma) {
o.onkeypress = o.onkeyup = null;
if (!e) e = window.event;
var code = e.keyCode;
if (!code && e.which) code = e.which;
if (code >= 96 && code <= 105) code -= 48;
var preventDefault = ((code > 57 && (code != 110 && code != 188)) || code == 32 || (code >= 48 && e.shiftKey));
if (!allowComma && (code == 188 || code == 110)) preventDefault = true;
if (!preventDefault) {
if (separate) {
if (NumericBox_CanSelect(o)) {
if (((code >= 48 && code <= 57) || code == 8 || code == 46 || code == 110 || code == 188)) {
preventDefault = NumericBox_FormatNumber(o, code, allowComma);
}
}
}
}
if (preventDefault) {
o.onkeypress = o.onkeyup = function (e) {
if (!e) e = window.event;
return false;
};
return false;
}
return true;
}
function NumericBox_CanSelect(o) {
return (typeof(o.createTextRange) != 'undefined' || typeof(o.selectionStart) != 'undefined');
}
function NumericBox_FormatNumber(o, code, allowComma) {
if (!allowComma && (code == 188 || code == 110)) return true;
var preventDefault = false;
var startPos = getSelectionStart(o);
var endPos = getSelectionEnd(o);
var s = o.value;
//delete all non numbers except one optional comma
var i = o.value.length - 1;
while (i >= 0) {
var c = s.charAt(i);
if (c < '0' || c > '9') {
if (c == ',' && allowComma == true) {
allowComma = false;
} else {
s = s.substring(0, i) + s.substring(i + 1);
if (startPos > i) startPos--;
if (endPos > i) endPos--;
}
}
i--;
}
if (startPos == 1 && s.charAt(0) == '0' && code == 48) preventDefault = true;
if (startPos == 0 && s.length > 0 && code == 48) preventDefault = true;
while...