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

Javascript Problem Overview

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"?

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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

Solution 3 - Javascript

Currently the only elements that allow text selection safely are:

<input type="text|search|password|tel|url"> as described in:
whatwg: selectionStart attribute.

You can also read the documentation for the HTMLInputElement interface to take a closer look of the input elements.

To overcome this "issue" safely, the best for now is deal with an <input type="text"> and apply a mask/constraint that accept only numbers. There are some plugins around that satisfy the requirement:

http://digitalbush.com/projects/masked-input-plugin/
http://jherax.github.io/#jqueryfnnumericinput-
http://firstopinion.github.io/formatter.js/
and tons of others...

You can see a live demo of one of the previous plugins here:

http://plnkr.co/edit/VPVokB?p=preview

If you want to use safely `selectionStart`, then you can check for those elements that support it (see input type attributes) Implementation

// Fix: failed to read the 'selectionStart' property from 'HTMLInputElement'
// The @fn parameter provides a callback to execute additional code
var _fixSelection = (function() {
    var _SELECTABLE_TYPES = /text|password|search|tel|url/;
    return function fixSelection (dom, fn) {
        var validType = _SELECTABLE_TYPES.test(dom.type),
            selection = {
                start: validType ? dom.selectionStart : 0,
                end: validType ? dom.selectionEnd : 0
            };
        if (validType && fn instanceof Function) fn(dom);
        return selection;
    };
}());

// Gets the current position of the cursor in the @dom element
function getCaretPosition (dom) {
    var selection, sel;
    if ('selectionStart' in dom) {
        return _fixSelection(dom).start;
    } else { // IE below version 9
        selection = document.selection;
        if (selection) {
            sel = selection.createRange();
            sel.moveStart('character', -dom.value.length);
            return sel.text.length;
        }
    }
    return -1;
}

Usage

// If the DOM element does not support `selectionStart`,
// the returned object sets its properties to -1.
var box = document.getElementById("price"),
    pos = getCaretPosition(box);
console.log("position: ", pos);

The above example can be found here: jsu.fnGetCaretPosition()

Solution 4 - Javascript

There is one way you can accomplish this on Chrome (and maybe some other browsers, but Chrome is the big offender here). Use window.getSelection() to retrieve the selection object from the current input and then test extend the selection backwards (or forwards) and see if the toString() value of the selection changes. If it doesn't, the cursor is at the end of the input and you can move to your next input. If it does, you have to then reverse the operation to undo the selection.

s = window.getSelection();
len = s.toString().length;
s.modify('extend', 'backward', 'character');
if (len < s.toString().length) {
    // It's not at the beginning of the input, restore previous selection
    s.modify('extend', 'forward', 'character');
} else {
    // It's at the end, you can move to the previous input
}

I got this idea from this SO answer: https://stackoverflow.com/a/24247942

Solution 5 - Javascript

This was happening for us while using the jQuery Numeric Plugin, version 1.3.x, so wrapping the selectionStart and selectionEnd with a try...catch{} we were able to suppress the error.

Source: https://github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

Solution 6 - Javascript

As a work-around, the type="tel" input type provides very similar functionality to type="number" in Chrome and does not have this limitation (as pointed out by Patrice).

Solution 7 - Javascript

can't we just reverse the element check to just include the elements that are supported, like this:

if (deviceIsIOS &&
    targetElement.setSelectionRange &&
    (
        targetElement.type === 'text' ||
        targetElement.type === 'search' ||
        targetElement.type === 'password' ||
        targetElement.type === 'url' ||
        targetElement.type === 'tel'
    )
) {

instead of this:

if (deviceIsIOS && 
    targetElement.setSelectionRange && 
    targetElement.type.indexOf('date') !== 0 && 
    targetElement.type !== 'time' && 
    targetElement.type !== 'month'
) {

Solution 8 - Javascript

While the issue with the deprecated events for this type of form field may be still relevant, as far as I can see, this kind of field can be listened to with the "change" event, as usual.

I got to this article here while looking for an answer to the events issue for this type of field, but while testing it, I found that I can simply rely on the "change" event as mentioned.

Solution 9 - Javascript

I received this error in an angularjs website.

I had created a custom data attribute on an input and was also using ng-blur (with $event).

When my callback was called I was trying to access the 'data-id' value like:

var id = $event.target.attributes["data-id"]

And it should have been like this:

var id = $event.target.attributes["data-id"].value

There doesn't seem to be too much about this error anywhere so I am leaving this here.

Solution 10 - Javascript

I know this answer comes too late but here is a plug-in that implements selectionStart for all types of elements, for most of the browsers (old & new):

https://github.com/adelriosantiago/caret

I have updated it to deal with the type="number" issue by using @ncohen 's answer.

Solution 11 - Javascript

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

var checkFocus = false;
var originalValue = "";
$(document).ready(function() {
  $("input").focus(function() {
    var that = this;
    if ($('#' + $(this).context.id).attr("type") == "text") {
      setTimeout(function() {
        if (that.selectionStart != null || that.selectionEnd != null) {
          that.selectionStart = that.selectionEnd = 10000;
        }
      }, 0);
    } else if ($('#' + $(this).context.id).attr("type") == "number") {
      if (checkFocus) {
        moveCursorToEnd($('#' + $(this).context.id), $(this).context.id);
        checkValue($('#' + $(this).context.id))
        checkFocus = false;
      } else {
        $('#' + $(this).context.id).blur();
      }
    }
  });
});

function FocusTextBox(id) {
  checkFocus = true;
  document.getElementById(id).focus();
}

function checkValue(input) {
  if ($(input).val() == originalValue || $(input).val() == "") {
    $(input).val(originalValue)
  }
}

function moveCursorToEnd(input, id) {
  originalValue = input.val();
  input.val('');
  document.getElementById(id).focus();
  return originalValue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<button onclick="FocusTextBox('textid')">
   <input id="textid" type="number" value="1234" > 
</button>

Solution 12 - Javascript

Watch out for false positive on this in Angular if using Chrome's device testing mode.

So this is clearly Chrome and not an actual iPhone - yet the error still gets raised because _platform.IOS returns true and then setSelectionRange subsequently fails.

This is Angular - but similar issues may exist in other frameworks / environments.

Solution 13 - Javascript

You can get the cursor position (selectionStart, selectionEnd) modifying the type attribute in event.target object:

const input = document.querySelector("input");
input.addEventListener("keyup", (e) => {
  const {target} = e;
  target.setAttribute("type", "text")
  console.log(target.selectionStart, target.selectionEnd)
});

<input type="number" />

Content Type	Original Author	Original Content on Stackoverflow
Question	Steven	View Question on Stackoverflow
Solution 1 - Javascript	Patrice Chalin	View Answer on Stackoverflow
Solution 2 - Javascript	ncohen	View Answer on Stackoverflow
Solution 3 - Javascript	jherax	View Answer on Stackoverflow
Solution 4 - Javascript	Pre101	View Answer on Stackoverflow
Solution 5 - Javascript	jbwebtech	View Answer on Stackoverflow
Solution 6 - Javascript	Kevin Borders	View Answer on Stackoverflow
Solution 7 - Javascript	Jochie Nabuurs	View Answer on Stackoverflow
Solution 8 - Javascript	TheCuBeMan	View Answer on Stackoverflow
Solution 9 - Javascript	Mike Cheel	View Answer on Stackoverflow
Solution 10 - Javascript	adelriosantiago	View Answer on Stackoverflow
Solution 11 - Javascript	Cha Mildz	View Answer on Stackoverflow
Solution 12 - Javascript	Simon_Weaver	View Answer on Stackoverflow
Solution 13 - Javascript	lissettdm	View Answer on Stackoverflow

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

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

If you want to use safely `selectionStart`, then you can check for those elements that support it (see input type attributes) Implementation

Usage

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Intellij - what is this strange selection, and how do I turn it off?

Infinite scrolling with React JS

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

If you want to use safely selectionStart, then you can check for those elements that support it (see input type attributes) Implementation

Usage

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Solution 10 - Javascript

Solution 11 - Javascript

Solution 12 - Javascript

Solution 13 - Javascript

Intellij - what is this strange selection, and how do I turn it off?

Infinite scrolling with React JS

Attributions

If you want to use safely `selectionStart`, then you can check for those elements that support it (see input type attributes) Implementation