I found the following JQuery function here which prevents a user from entering anything that\'s not a number or a single decimal. The function works well but I\'d like to i
I've updated the function for a few extra cases.
/**
* Given an input field, this function will only allow numbers with up to two decimal places to be input.
* @param {object} element
* @return {number}
*/
function forceNumber(element) {
element
.data("oldValue", '')
.bind("paste", function(e) {
var validNumber = /^[-]?\d+(\.\d{1,2})?$/;
element.data('oldValue', element.val())
setTimeout(function() {
if (!validNumber.test(element.val()))
element.val(element.data('oldValue'));
}, 0);
});
element
.keypress(function(event) {
var text = $(this).val();
if ((event.which != 46 || text.indexOf('.') != -1) && //if the keypress is not a . or there is already a decimal point
((event.which < 48 || event.which > 57) && //and you try to enter something that isn't a number
(event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
(event.which != 0 && event.which != 8))) { //and the keypress is not a backspace or arrow key (in FF)
event.preventDefault(); //cancel the keypress
}
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2) && //if there is a decimal point, and there are more than two digits after the decimal point
((element[0].selectionStart - element[0].selectionEnd) == 0) && //and no part of the input is selected
(element[0].selectionStart >= element.val().length - 2) && //and the cursor is to the right of the decimal point
(event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
(event.which != 0 && event.which != 8)) { //and the keypress is not a backspace or arrow key (in FF)
event.preventDefault(); //cancel the keypress
}
});
}
forceNumber($("#myInput"));