The input element's type ('number') does not support selection.

[przemyslawpluta]

Formatter fails with input number on Chrome Canary v34.0.1798.0

<input type='number' class='myNumber' placeholder='1' min='0' max='50' step='1'>

$('input.myNumber').formatter({ pattern: '{{99}}' });

with an error message visible in the console:

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

Any text or number can be typed it.

[chalin]

FYI, as of version 33 of Chrome, it is no longer possible to get or set the selection of an input of type number: see Chromium Issue 324360: selectionStart and SelectionEnd incorrectly available on input type=email/number. I am looking for alternatives, but have found nothing so far. Would welcome suggestions if you have any.

[jaridmargolin]

@chalin: Thank you for notifying me regarding https://code.google.com/p/chromium/issues/detail?id=324360. Unfortunately no solutions are immediately apparent. Will continue to investigate.

[srucker88]

+1

[jaridmargolin]

Curious in what use cases people are needing to use formatter.js with input type number?

@przemyslawpluta: Could you clarify what formatter.js is helping you achieve in your example? Perhaps there is an alternate method I could expose?

cc: @Night-Time-Developer

Thanks!

[przemyslawpluta]

@jaridmargolin allow for numbers only, no decimals, lower then a specific value.

[fritzgrabo]

@jaridmargolin credit card number, with a pattern of '{{9999}}-{{9999}}-{{9999}}-{{9999}}'. As we're using this on a mobile site, an input of type "number" would pop up a much more suitable keyboard type. It'd be awesome to find a solution for this. Thanks for all your work so far!

[Abbe98]

Note that this issue applies to type="date" too...

[ethier]

Just had it happen on a type="email" as well.

[Abbe98]

See https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796 for more about the issue.

[cjkarande]

Even i am facing the same issue. Any possible work around or patch code for this issue?

[jaridmargolin]

Possible workaround found in the discussion posted by @Abbe98

[jonathan-dejong]

This is still an issue with Chrome and the number input when user types in a number/string (not using the increment/decrement arrows).

[james-vaughn]

This appears to still be an issue for me. Trying this in different browsers, Ive gotten select to work in Firefox and mobile browsers, but not Chrome. Can someone else confirm this is an issue or if this got fixed and something is wrong on my end?

[Abbe98]

@james-vaughn it's still an issue.

2016-08-04 21:04 GMT+02:00 james-vaughn notifications@github.com:

This appears to still be an issue for me. Trying this in different browsers, Ive gotten select to work in Firefox and mobile browsers, but not Chrome. Can someone else confirm this is an issue or if this got fixed and something is wrong on my end?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/firstopinion/formatter.js/issues/29#issuecomment-237651523, or mute the thread https://github.com/notifications/unsubscribe-auth/ACgoJwaJ_963Sea8wuQsAVA8WEBrLoMYks5qcjetgaJpZM4BbnhM .

[floriancapelle]

I just faced this issue as well. Unfortunately i need to use 'number' as input type because it is required to show the keyboard optimized for numbers on mobile devices.

[MarSab]

+1

we need to show the numerical keyboard on mobile too

[elmatadorinho]

+1 Same here

[monw3c]

Same here

[yoyo-git]

who can resolve the question ?

[zagarskas]

The best solution is for Chrome to update...

In the meantime, why not just detect the type and then write something else? (I was able to use this to get the console error to go away)

// find the type
 var field_type = $('input.myNumber').attr('type');

if(field_type === "number") { //run some custom $.fn.inputFilter }
if(field_type === "date") { // do something else }
if(field_type === "datetime-local") { // do something else }
if(field_type === "range") { // do something else }
if(field_type === "text") {
    $('input.myNumber').formatter({ pattern: '{{99}}' });
    // or whatever, for example
    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}

$.fn.inputFilter is a reference to this solution for humans entering fubar into number fields https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery

From stackoverflow: Integer values (both positive and negative): /^-?\d*$/.test(value) Integer values (positive only): /^\d*$/.test(value) Integer values (positive and up to a particular limit): /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500) Floating point values (allowing both . and , as decimal separator): /^-?\d*[.,]?\d*$/.test(value) Currency values (i.e. at most two decimal places): /^-?\d*[.,]?\d{0,2}$/.test(value) Hexadecimal values: /^[0-9a-f]*$/i.test(value)