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.

I know this is an old question, but I did find a good workaround without using the tel input type. By changing the input type from number to text before the selection, the error goes away and you get to keep all the benefits of the number input type.

• tel allows text input, which may not work with numbers.
• tel does not show the number "spinner" next to the input (only if you want it).

function onInputFocus(event) {
  const target = event.currentTarget;

  target.type = 'text';
  target.setSelectionRange(0, target.value.length);
  target.type = 'number';
}

The evt.target.select() selects content of input type="number" in Chrome, the "if" structure does the same on touch devices.

document.querySelector('.number_input').addEventListener('focus', function (evt) {
    evt.target.select();
    if ('ontouchstart' in window) {
      setTimeout(function() {
        evt.target.setSelectionRange(0, 9999);
      }, 1);
    }
}, true);

Unfortunately that "if" prevents that autoselect in Mac Safari, I don't know how to get the same result both in desktop browsers and mobile.