0

I have a form with an input such as this:

<form>
    <input type='number' id='nb'>
</form>

Now, the issue is the following:

When a user inputs an invalid number, I can't get the raw input to try and fix it myself.

For example, depending on the locale, the following numbers can be invalid:

400 000
43,2
43.2

The first one can come from a copy/paste, the other 2 from a misconfiguration of the device, or the use of a device not configured in the users native language.

I have tried to add novalidate to the form and to the input, it does not change anything.

I know that input.validity.valid returns false and that usually input.validity.badInput will be true, so I can display a message to the user, but the message can be unspecific and confusing, especially since the decimal point issue can easily be identified and fixed, and it is quite commonly seen during field tests.

I have tried to change the type of the input dynamically (so it displays a keypad on mobile devices), but every time I change the type, the value is cleared.

I have considered preventing the input of invalid chars by intercepting keydown events, but that does not solve copy-paste issue.

I have also considered tracking the complete input, but that is unreasonable considering all the possible cases of inputs (to mention only copy-pasting).

I have read this question, but I am not satisfied with the answer. The input is on the screen, I can see it, I don't see what good reason there could be that I cannot read it.

Edit

jsfiddle : http://jsfiddle.net/AXu92/

Community
  • 1
  • 1
njzk2
  • 38,969
  • 7
  • 69
  • 107
  • 4
    JSFiddle with an example would be nice with what you tried. – epascarello May 28 '14 at 15:04
  • You cannot read it, or the value is not set? The design of the `number` input type is that the value can only be a valid number, why are you not satisfied with this reason? – robertc May 28 '14 at 15:12
  • @robertc: I am not satisfied with a user copy-pasting `400 000` in a number field and the value recognized by the field is NaN without a chance for me to do something about it. – njzk2 May 28 '14 at 15:15
  • 2
    If you want to be more permissive than _number_, then don't use _number_ and use _text_ instead – Paul S. May 28 '14 at 15:20
  • @PaulS.: yes, that's what we are doing now, but it would be nice to display a numeric keypad on mobile devices (with decimal point input, which is why type="tel" is not an option either.) – njzk2 May 28 '14 at 15:21
  • I don't think it's supported yet, but you could try [setting the `inputmode`](http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#input-modalities:-the-inputmode-attribute). – robertc May 28 '14 at 15:24
  • @robertc: thank you for that suggestion. I should have mentioned that I have read about this attribute too, but I don't think it is not widely supported. (According to MDN, it is not at all https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ) – njzk2 May 28 '14 at 15:32
  • That table must be somewhat out of date since there's a [resolved issue on Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=746142). – robertc May 28 '14 at 15:34
  • @robertc: Ok, thanks for pointing that out. I will test on mobile devices to assert support. – njzk2 May 28 '14 at 15:40
  • I've closed this as a duplicate, as it's essentially the same question. I can understand that you're not satisfied with the answer (and neither am I), but it's the correct answer as of now. Either a) offer a bounty on that other question b) ask a different question like "*what's the best workaround*" or c) submit a request to WHATWG/W3C for changing the behaviour. – Bergi May 28 '14 at 15:51
  • @Bergi: Ok. I was hoping there would be different solution as the other question is a few months old, and this field evolves quite rapidly. I assume the correct answer will be to use `inputmode="numeric"` when this is supported, until then, not using `number` at all. – njzk2 May 28 '14 at 15:55
  • Yeah, if you're looking for new answer on that field [a bounty](http://stackoverflow.com/help/bounty) would be the way to go. – Bergi May 28 '14 at 15:59

0 Answers0