Limit Textfield Input to digits only

Question

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.

Answer 1

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.

Answer 2

If you are using jQuery, you can use the AlphaNumeric plugin. With this plugin it would be a matter of:

$('.numeric_field').numeric();

Answer 3

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).