selectionStart/selectionEnd on input type=

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

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 by Patrice Chalin for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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 by TheCuBeMan for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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 by jbwebtech for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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 by Kevin Borders for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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 by Mike Cheel for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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 by jherax for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

? Currently the only elements that allow text selection safely are:

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 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  function _fixSelection (dom, fn) {      var validType = (/text|password|search|tel|url/).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 by Jochie Nabuurs for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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 by Pre101 for selectionStart/selectionEnd on input type="number" no longer allowed in Chrome

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: http://stackoverflow.com/a/24247942

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72