javascript - How to overcome WhatWGW3CChrome version 33.0.1750.146 "regression bug" with <input type=&a

admin管理员组

文章数量:1324842

I put the words "regression bug" in quotes as there is obviously some mixed opinions on this. For full details track Bug 24796 in Bugzilla.

In short Google Chrome implemented changes according to the latest version of the WhatWG specs: .html#input-type-attr-summary that removed the following properties and methods from <input type="number"/> fields.

Properties:

• selectionStart
• selectionEnd

Methods:

• select()
• setSelectionRange(start, end)

(there are others but these are the mon key ones used)

The methods are defined if you inspect a "numeric" instance of the HTMLInputElement however attempting to call the methods or request the properties will throw an exception. :-(

IMHO this is a bug (since functionality has been removed with nothing gained... and there are 1,000's of web sites/applications that provide extended behavior to these numeric input fields via JavaScript... but I digress (for those that wish to battle it out please use the bug post listed above))

TL;DR

For usability purposes I most certainly want and plan to continue using <input type="number"/> fields as they provide a "hint" to the user agent that if on a mobile device (smartphone/tablet/?) that I would like to present the numeric keyboard when the field is focused vs. the default alpha keyboard.

However for the current version of Chrome (ver 33.0.1750.146) and any other browser that blindly implements this spec change I'd like to safely convert the rendered fields back to <input type="text"/>

Notes:

• Attempting to change these fields on the fly when modifying their contents has proven unsuccessful as the field loses it's selection range when the type attribute is changed.
• I do have a workaround solution I came up with which I'll post shortly, but I wanted to ensure this question/answer was here for all developers that encounter this issue

I put the words "regression bug" in quotes as there is obviously some mixed opinions on this. For full details track Bug 24796 in Bugzilla.

In short Google Chrome implemented changes according to the latest version of the WhatWG specs: http://www.whatwg/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary that removed the following properties and methods from <input type="number"/> fields.

Properties:

• selectionStart
• selectionEnd

Methods:

• select()
• setSelectionRange(start, end)

(there are others but these are the mon key ones used)

The methods are defined if you inspect a "numeric" instance of the HTMLInputElement however attempting to call the methods or request the properties will throw an exception. :-(

IMHO this is a bug (since functionality has been removed with nothing gained... and there are 1,000's of web sites/applications that provide extended behavior to these numeric input fields via JavaScript... but I digress (for those that wish to battle it out please use the bug post listed above))

TL;DR

For usability purposes I most certainly want and plan to continue using <input type="number"/> fields as they provide a "hint" to the user agent that if on a mobile device (smartphone/tablet/?) that I would like to present the numeric keyboard when the field is focused vs. the default alpha keyboard.

However for the current version of Chrome (ver 33.0.1750.146) and any other browser that blindly implements this spec change I'd like to safely convert the rendered fields back to <input type="text"/>

Notes:

• Attempting to change these fields on the fly when modifying their contents has proven unsuccessful as the field loses it's selection range when the type attribute is changed.
• I do have a workaround solution I came up with which I'll post shortly, but I wanted to ensure this question/answer was here for all developers that encounter this issue

• javascript
• google-chrome
• html-input
• soft-keyboard
• selection-api

Share Improve this question Follow edited Nov 21, 2022 at 8:21 sideshowbarker♦ 88.4k2929 gold badges215215 silver badges212212 bronze badges asked Mar 13, 2014 at 14:32 scunliffescunliffe 63.7k2626 gold badges131131 silver badges165165 bronze badges 6

• 1 Sounds very frustrating. However, it sounds more like a rant over the decision than a post asking for advice at the moment. Also, it's a duplicate stackoverflow./q/21177489/1348195 – Benjamin Gruenbaum Commented Mar 13, 2014 at 14:40
• The other question is similar but not quite the same (and more importantly has no solutions)... I'm just waiting to be able to post my answer until the timed lockout expires. – scunliffe Commented Mar 13, 2014 at 14:46
• 1 You should consider posting your solution on that question. – Benjamin Gruenbaum Commented Mar 13, 2014 at 14:47
• Also, when posting a question that you intend to answer yourself, there's a checkbox for that when asking the question that allows you to bypass that timed lockout. – Kevin B Commented Mar 13, 2014 at 15:02
• 1 Thanks for opening a W3 bug about this. I deleted my question, as there are better ones (this and the one about selectionStart that are out there (that I didn't find when searching for the issue). – Eric L. Commented Mar 13, 2014 at 20:15

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

I've solved this with the following code:

function checkForInputTypeNumberBug(){
  var dummy = document.createElement('input');
  try {
    dummy.type = 'number';
  } catch(ex){
    //Older IE versions will fail to set the type
  }
  if(typeof(dummy.setSelectionRange) != 'undefined' && typeof(dummy.createTextRange) == 'undefined'){
    //Chrome, Firefox, Safari, Opera only!
    try {
      var sel = dummy.setSelectionRange(0,0);
    } catch(ex){
      //This exception is currently thrown in Chrome v33.0.1750.146 as they have removed support
      //for this method on number fields. Thus we need to revert all number fields to text fields.
      $('input[type=number]').each(function(){
        this.type = 'text';
      });
    }
  }
}
$(document).ready(function(){
  checkForInputTypeNumberBug();
});

I've made it a standalone function as I have cases where the fields are loaded via AJAX and I need to be able to call the function on the fly.

This code handles older IE versions where attempting to set the type will fail as well as handle the exception in Chrome (on a dummy element) so that pages can overe this behavior change.

Update: As per @Andy E's suggestion around using the inputmode attribute (currently unsupported) I've created a bug to try and prioritize the implementation of inputmode before user agents remove the selection APIs: https://www.w3/Bugs/Public/show_bug.cgi?id=26695

Depending on the use case, there may be a more appropriate (albeit elaborate) workaround. For instance, in order to add text at the current position of the cursor, you can do the following (tested in Chrome):

var len, pre, post,

    // Currently focused element
    a = document.activeElement,

    // Get current selection
    s = window.getSelection();

// Delete any existing contents
s.deleteFromDocument();

// Keep moving selection backward until the length stops increasing
do {
    len = String(s).length;
    s.modify('extend', 'backward', 'line');
}
while (String(s).length !== len);

// Store the selection, then delete it
pre = String(s);
s.deleteFromDocument();

// Keep moving selection forward until the length stops increasing
do {
    len = String(s).length;
    s.modify('extend', 'forward', 'line');
}
while (String(s).length !== len);

// Store the selection, then delete it
post = String(s);
s.deleteFromDocument();

// Recreate the contents with the new text added
a.setAttribute('value', a.defaultValue);
a.value = pre + txt + post;

// Move the selection to after the new text
a.select();
s = window.getSelection();
s.collapseToEnd();

while (len-- > 0)
    s.modify('move', 'backward', 'character');

There are limitations to this approach that might need even more elaborate solutions, too, such as when a different value is returned than text is selected (which may be the case for arabic domain names in a type="email" input, for example).

Sadly, there's a bug that prevents this workaround from working in Firefox/Gecko, but at least Firefox still allows Selection API on <input type="email">.

本文标签：