在Chrome中不再允许输入类型为“ number”的selectionStart / selectionEnd结束

我们的应用程序使用selectionStart输入字段，以确定是否自动移动用户到下一个/前场，当他们按箭头键（即，当选择是在文本的结束和用户按下右箭头我们进入下一个字段，否则）

Chrome现在禁止在type =“ number”处使用selectionStart。现在，它将引发异常：

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

请参阅以下内容：

https://codereview.chromium.org/100433008/#ps60001

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply

有什么方法可以确定插入符在类型=“ number”的输入字段中的位置吗？

仅允许使用文本/搜索，URL，电话和密码进行选择。禁止对类型编号的输入进行选择的可能原因是在某些设备上或在某些情况下（例如，当输入以short表示list）时，可能没有插入符号。我发现的唯一解决方案是将输入类型更改为文本（使用适当的模式来限制输入）。我仍在寻找一种不更改输入类型的方法，并且在发现某些内容时会发布更新。

我找到了一个简单的解决方法（已在Chrome上测试）setSelectionRange()。您可以在使用前简单地将更type改为，然后再将其更改回。textsetSelectionRange()number

这是一个带有jquery的简单示例，每当您单击输入时，它将插入号放置在数字输入中的位置4（在输入中添加5个以上的数字以查看行为）

矮人

当前唯一允许安全选择文本的元素是：

<input type="text|search|password|tel|url">如以下内容所述：
whatwg：selectionStart属性。

您也可以阅读HTMLInputElement接口的文档，以仔细了解输入元素。

为了安全地克服此“问题”，目前最好的方法是处理<input type="text">并应用仅接受数字的掩码/约束。周围有一些插件可以满足要求：

• http://digitalbush.com/projects/masked-input-plugin/
• http://jherax.github.io/#jqueryfnnumericinput-
• http://firstopinion.github.io/formatter.js/
• 还有很多其他...

您可以在此处查看上述插件之一的实时演示：

• http://plnkr.co/edit/VPVokB?p=预览

如果要安全使用selectionStart，则可以检查支持它的那些元素（请参阅输入类型属性）

实作

// 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;
}

用法

// 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);

上面的示例可以在这里找到：jsu.fnGetCaretPosition（）

这是发生了我们，而使用jQuery插件数字，1.3.x版，所以包裹selectionStart，并selectionEnd用try...catch{}我们能够压制错误。

来源：https : //github.com/joaquingatica/jQuery-Plugins/commit/a53f82044759d29ff30bac698b09e3202b456545

解决方法是，type="tel"输入类型提供与type="number"Chrome中非常相似的功能，并且没有此限制（如Patrice所指出）。

您可以通过一种方法在Chrome上（可能还有其他一些浏览器上）完成此任务，但Chrome是这里的罪魁祸首。用于window.getSelection()从当前输入中检索选择对象，然后测试将选择向后（或向前）扩展，并查看toString()选择值是否更改。如果不是，则光标位于输入的末尾，您可以移至下一个输入。如果是这样，则必须撤消该操作以撤消选择。

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
}

我从这个SO答案中得到了这个想法：https : //stackoverflow.com/a/24247942

我们不能仅仅将元素检查反转为仅包含受支持的元素，如下所示：

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

代替这个：

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

尽管对于这种类型的表单字段而言，不赞成使用的事件的问题可能仍然很重要，但据我所知，可以像往常一样通过“ change”事件来监听此类字段。

在为此类字段寻找事件问题的答案时，我在这里读了这篇文章，但是在测试它时，我发现我可以简单地依靠所提到的“更改”事件。

我在angularjs网站上收到此错误。

我在输入上创建了一个自定义数据属性，并且还在使用ng-blur（带有$ event）。

当我的回调被调用时，我试图访问“ data-id”值，例如：

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

它应该是这样的：

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

这个错误似乎在任何地方都没有太多，因此我将其留在这里。

我知道这个答案来得太晚了，但是这里有一个插件，它对大多数浏览器（旧的和新的）都适用于所有类型的元素的selectionStart：

https://github.com/adelriosantiago/caret

我已经type="number"通过使用@ncohen的答案来更新它以解决该问题。

解决Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.方法如下：

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>

如果使用Chrome的设备测试模式，请在Angular中警惕此错误。

因此，这显然是Chrome，而不是实际的iPhone-但仍然会引发错误，因为_platform.IOS返回true，然后setSelectionRange失败。

这是Angular，但其他框架/环境中可能存在类似问题。