Javascript 选择开始/选择结束输入类型="；“数字”；不再允许在Chrome中使用

我们的应用程序使用输入字段上的selectionStart来确定当用户按下箭头键时是否自动将用户移动到下一个/上一个字段（即，当选择位于文本末尾且用户按下右箭头时，我们将移动到下一个字段，否则）

Chrome现在禁止在type=“number”的位置使用selectionStart。 它现在抛出异常：

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

见下文：

---

有没有办法确定插入符号在type=“number”？输入字段中的位置。对类型编号的输入禁用选择的可能原因是，在某些设备上，或在某些情况下（例如，当输入显示为短

列表时），可能没有插入符号。我找到的唯一解决方案是将输入类型更改为文本（使用适当的模式限制输入）。我仍在寻找一种不改变输入类型的处理方法，并将在我发现某些内容时发布更新。
虽然此类表单字段的不推荐事件问题可能仍然相关，但据我所见，此类字段可以像往常一样与“更改”事件一起收听

我在这里读到这篇文章是为了寻找这类字段的事件问题的答案，但在测试它时，我发现我可以简单地依赖上面提到的“更改”事件。
这是在使用jQuery数字插件1.3.x版时发生的，因此，用
try…catch{}
包装
selectionStart
和
selectionEnd
，我们能够抑制错误

来源：
作为一种解决方法，
type=“tel”
输入类型提供了与Chrome中的
type=“number”
非常相似的功能，并且没有这个限制（正如Patrice所指出的）。
我在angularjs网站上收到了这个错误

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

调用回调时，我试图访问“数据id”值，如下所示：

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

应该是这样的：

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

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

似乎没有太多关于这个错误的地方，所以我把它留在这里。
​
目前，允许安全选择文本的元素只有：

如中所述：

您还可以阅读的文档，以便更仔细地查看输入元素

为了安全地克服这个“问题”，目前最好的方法是处理
，并应用只接受数字的掩码/约束。有一些插件可以满足这一要求：





还有很多其他的

您可以在此处看到先前插件之一的实时演示：




如果要安全地使用
选择启动
，则可以检查支持它的元素（请参阅）

实施
//修复：无法从“HTMLInputElement”读取“selectionStart”属性
//@fn参数提供了一个回调来执行其他代码
var_fixSelection=（函数（）{
var |可选|类型=/text | password | search | tel | url/；
返回函数fixSelection（dom，fn）{
var validType=_可选_TYPES.test（dom.type），
选择={
开始：validType？dom.selectionStart:0，
结束：validType？dom.selectionEnd:0
};
if（validType&&fn函数实例）fn（dom）；
返回选择；
};
}());
//获取光标在@dom元素中的当前位置
函数getCaretPosition（dom）{
var选择；
如果（dom中的“selectionStart”）{
return\u fixSelection（dom）.start；
}else{//IE低于版本9
选择=文件。选择；
如果（选择）{
sel=selection.createRange（）；
sel.moveStart（'character'，-dom.value.length）；
返回sel.text.length；
}
}
返回-1；
}

用法
上面的例子可以在这里找到：
我们是否可以反转元素检查，只包含受支持的元素，如下所示：

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

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

有一种方法可以在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
}

s=window.getSelection（）；
len=s.toString（）.长度；
s、 修改（'extend'，'backward'，'character'）；
if（len

我从这个答案中得到了这个想法：
我找到了一个简单的解决方法（在Chrome上测试过），用于
setSelectionRange（）
。在使用
setSelectionRange（）
之前，您只需将
类型更改为
文本，然后将其更改回
数字

下面是一个使用jquery的简单示例，每当您单击输入时，它都会将插入符号定位在数字输入的位置4（在输入中添加5个以上的数字以查看行为）

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


我已使用@ncohen的答案更新了它，以处理
type=“number”
问题。
Solve
无法读取“选择”