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

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.

Answer 3

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

Answer 4

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).

Answer 5

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.

Answer 6

​ 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()

Answer 7

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'
) {

Answer 8

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

Answer 9

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

Answer 10

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.

Answer 11

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>

Answer 12

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.