I've searched Google, but all the solutions I could find were really complicated and long. What I need is to limit the input of a textfield in a survey I'm making to digits only. What is the quickest and cleanest way to do this?
(I'm using HTML 4.01 strict and ECMAScript)
Thanks in advance.
The quickest:
<input type="text" onkeyup="this.value = this.value.replace(/\D/g, '')">
That won't stop people from pasting things in with their mouse, so an onchange and onclick are probably desirable, too.
The cleanest (or at least a clean way to do it):
function forceNumeric() {
this.value = this.value.replace(/\D/g, '');
}
If you're using a JS framework, give all your numeral-only inputs a class that indicates the fact (class="numeric" or something like that), and add forceNumeric as a callback for keyup, change, and click to any input element with that class:
$('.numeric').keyup(forceNumeric).change(forceNumeric).click(forceNumeric);
If you're using straight JS (I'd recommend not using straight JS), either use element.addEventListener, or onkeyup, onchange, and onclick.
If you are using jQuery, you can use the AlphaNumeric plugin. With this plugin it would be a matter of:
$('.numeric_field').numeric();
We solved this with a simple combo, fist the HTML:
<input type="tel">
Using type tel helps in 2 ways: browser validation and showing numeric keyboard on mobile devices for a better user experience.
Then, a simple JS validation (jQuery example):
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^0-9]/g, ''))
})
$('[type=tel]').on('keypress', function() {
return event.charCode >= 48 && event.charCode <= 57
})
We ended up needing 2 functions, one for the normal user input (keypress) and the other for a copy+paste fix (change).
