Regex replace from number type input

Question

I have a number type input that I want to prevent people from entering anything but numbers. The examples I found work well with input type text fields but don't work well with number fields.

Works well :)

<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Doesn't works well :(

<input type="number" onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Try it for yourself on JSFiddle

Please help...

Does it absolutely have to be `type="number"`? I think the problem here, is that the number field operates differently by nature — Vasili Syrakis, Apr 30 '14 at 10:18
Also, does it really "work well"? For example if someone pastes text into the box, there is no `onkeyup` event that could catch that... — Tim Pietzcker, Apr 30 '14 at 10:20
@Vasili SyrakisWell, the main reason is for it to work nicely on mobiles - like bring up the number keypad rather than the full keyboard. — Karl Stulik, Apr 30 '14 at 10:20
This might be of help in regards to which event to listen for with the type=number input field: [What events does an fire when it's value is changed?](http://stackoverflow.com/questions/3940258/what-events-does-an-input-type-number-fire-when-its-value-is-changed) — AeroX, Apr 30 '14 at 10:26
I wonder what the experts at http://ux.stackexchange.com/ have to say about this - is it better to silently change to user's input, to display a warning message next to the input box or to complain after the user has clicked "Submit"? — Tim Pietzcker, Apr 30 '14 at 10:28
@Tim Pietzcker - I would imagine a bit of both. If it were for a number field I would remove them silently but if it were for an email address I would put up an error message. — Karl Stulik, Apr 30 '14 at 10:31
I found a pertinent question: http://ux.stackexchange.com/questions/46052/for-non-special-character-textbox-should-i-use-inline-validating-message-or-blo — Tim Pietzcker, Apr 30 '14 at 10:50

AeroX · Accepted Answer · 2014-04-30T11:01:12.563

I've just done some simple testing using JSFiddle and it would appear that if there is an invalid input on an <input type="number" /> element then the this.value property is returned blank.

The following line showed this result when using Chrome:

<input type="number" oninput="alert(this.value)">

JSFiddle Demo

In fact here's the reason why this happens:

The value attribute, if specified and not empty, must have a value that is a valid floating-point number.

The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

^ From the HTML5 Draft Paper section on the implementation of the number input type

This problem has taken my interest now and I've come up with a little workaround.

<input type="number" oninput="updateNum(this)">

function updateNum(e)
{
    e.select();
    e.value = getSelection().toString().replace(/[^\d]/g,'');
}

This has the potential to be buggy if the selection where to change between commands.

JSFiddle for the workaround

Yes, I have noticed that it returns its value in Firefox but not Chrome or IE. So it works in Firefox - is this a bug? — Karl Stulik, Apr 30 '14 at 10:50
@JasperJohns Yep, found a bug ticket for it on Bugzilla https://bugzilla.mozilla.org/show_bug.cgi?id=765772 — AeroX, Apr 30 '14 at 10:52

score 0 · Answer 2 · answered Apr 30 '14 at 12:42

0

See this DEMO if you want to accept numbers with fractional part (3.14 for example)

Number: <input type="number" oninput="updateNum(this)" />

function updateNum(e) {
if (isNaN(e.value)) {
    e.value = e.value.replace(/[^\d]/g,'');
}

answered Apr 30 '14 at 12:42

tgogos

23,218
20
96
128

Regex replace from number type input

2 Answers2