selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

Question

Our application uses selectionStart on input fields to determine whether to automatically move the user to the next/previous field when they press the arrow keys (ie, when the selection is at the end of the text and the user presses the right arrow we move to the next field, otherwise)

Chrome now prevents selectionStart from being used where type="number". It now throws the exception:

Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection. 

See following:

https://codereview.chromium.org/100433008/#ps60001

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply

Is there any way to determine the location of the caret in an input field of type="number"?

Answer 1

Selection is only permitted with text/search, URL, tel and password. The likely reason that selection has been disabled for inputs of type number is that on some devices, or under some circumstances (e.g., when the input has been is presented as a short list), there might not be a caret. The only solution I have found was to change the input type to text (with appropriate pattern to restrict input). I am still looking for a way to do with without changing the input type and will post an update when I find something.

Answer 2

I have found a simple workaround (tested on Chrome) for setSelectionRange(). You can simply change the type to text before you use setSelectionRange() and then change it back to number.

Here is a simple example with jquery that will position the caret at position 4 in the number input whenever you click on the input (add more than 5 number in the input to see the behavior)

plunker