Selectionstart/Selectionend on Input Type="Number" No Longer Allowed in Chrome

Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection

Use input type="tel" instead.

For your example:

<input type="tel" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" />

That will do the trick and avoid the error message.

And on mobile phones, it shows up the desired number pad.

Find if text is selected for input type number

You can use tel instead of number like:

<input type="tel" name="anything" />

So your edit box still accepts only number and input.selectionStart and input.selectionEnd are valid.

Please see this link: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection

How to allow only digits to be entered into an input[type=number] field?

HTML 4 has an event called onkeypress. With that attribute we can do this without using additional JS:

<input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

Unable to Type in number input field in Chrome 93 Cypress 8.4.1

The problem isn't reproducible, either with Chrome 93 or 96 (you mention both versions). The test passes when using that HTML in isolation.

Technically that error comes because of the type="number", from HTMLInputElement.setSelectionRange()

Note that according to the WHATWG forms spec selectionStart, selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection".

But Cypress has internal checks that avoid selectionStart for inputs of type number,

const canSetSelectionRangeElementRe = /^(text|search|URL|tel|password)$/

Since you are dealing with a phone number, the input type should (theoretically) be changed to type="tel".

<input type="tel" 
  name="phone_lead" id="phone_lead" 
  placeholder="+92 301 2345678" 
  class="required" 
  autocomplete="off">

---

Related Topics