javascript - 如何克服 WhatWG/W3C/Chrome version 33.0.1750.146 "regression bug"with <input type ="number"/> fields

Question

我把“回归错误”这个词用引号引起来，因为显然对此有一些不同的看法。有关完整详细信息，请跟踪 Bug 24796在 Bugzilla 中。

简而言之，Google Chrome 根据最新版本的 WhatWG 规范实现了更改:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary 从 <input type="number"/> 中删除以下属性和方法字段。

属性:

• 选择开始
• 选择结束

方法:

• 选择()
• 设置选择范围(开始，结束)

(还有其他的，但这些是常用的 key )

如果您检查 HTMLInputElement 的“数字”实例，则定义这些方法但是尝试调用方法或请求属性将引发异常。 :-(

恕我直言，这是一个错误(因为功能已被删除，但没有任何收获......并且有 1,000 个网站/应用程序通过 JavaScript 为这些数字输入字段提供扩展行为。 .. 但我离题了(对于那些希望与之抗争的人，请使用上面列出的错误帖子))

长话短说

出于可用性目的，我当然希望并计划继续使用 <input type="number"/>字段，因为它们向用户代理提供“提示”，如果在移动设备(智能手机/平板电脑/？)上，我会 喜欢在字段聚焦时显示数字键盘，而不是默认的字母键盘。

然而，对于当前版本的 Chrome(版本 33.0.1750.146)和任何其他盲目实现此规范更改的浏览器，我想安全地将呈现的字段转换回 <input type="text"/>

注意事项:

• 尝试在修改内容时即时更改这些字段已被证明是不成功的，因为当类型属性更改时字段会失去其选择范围。
• 我确实有一个我想出的变通解决方案，我会很快发布，但我想确保这个问题/答案在这里是为所有遇到这个问题的开发者准备的

Answer 1

我用下面的代码解决了这个问题:

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();
});

我已将其设为独立函数，因为我遇到过通过 AJAX 加载字段的情况，我需要能够即时调用该函数。

此代码处理较旧的 IE 版本，在这些版本中尝试设置类型将失败，并处理 Chrome 中的异常(在虚拟元素上)，以便页面可以克服此行为更改。

更新:根据@Andy E 关于使用 inputmode 属性的建议(目前不受支持)，我创建了一个 bug 来尝试在用户代理删除选择 API 之前优先执行 inputmode:https://www.w3.org/Bugs/Public/show_bug.cgi?id=26695