使用输入类型为数字获取光标位置

Question

我想要获取 <input> 中光标的位置。这是我正在使用的代码：

$("input").keyup(function() {
    $("<p>")
    .html("Cursor position at " + $("input").caretPosition())
    .appendTo("#test");
});

而caretPosition被定义为（只是对selectionStart的包装）：

$.fn.caretPosition = function() {
    if (!this.length) return;
    var input = this[0];
    try {
      return input.selectionStart;
    } catch(e) {
      // No need for old IE support
      return 0;
    }
}

HTML

<input type="number" />
<div id="test">
</div>

很不幸，这在Chrome中无法正常工作，但在Firefox中可以。在Chrome中，它始终打印0。这使我认为chrome不支持selectionStart，但我已经读到它支持selectionStart。这得到了证实，如果我将type =" number "更改为type =" text "，它就开始工作了。如何使其在type="number"的情况下能够在各种浏览器中保持一致？（不是IE，不需要支持它）。

我已经阅读了https://dev59.com/onE85IYBdhLWcg3wMQhm#2897510，但它对我没有用（在Chrome中）。

Jsfiddle：http://jsfiddle.net/prankol57/zbaaky5z/2/ 编辑：我已确认 input中的selectionStart 返回true。那么为什么会抛出错误？

- soktinpk

---

根据标准，只有少数输入类型支持selectionStart。http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#input-type-attr-summary 你为什么想获取插入符位置？ - int32_t

@int32_t 很好的观点。谢谢。我刚刚意识到，如果我删除 try {} catch 语句，就会检查控制台错误消息。 - soktinpk

Answer 1

正如 @int32_t 指出的那样，使用 <input type="number" /> 是不可能实现这一点的。我将其改为 <input type="text" />，并成功地实现了此功能；我添加了自己的数字验证方法，如下所示：

function validate(k) {
  return !isNaN(parseFloat(k)) && !isNaN(+k);
}

事实上，如果您去掉 try {} catch {} 语句，Chrome会抛出一个非常具有描述性的错误：

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

- soktinpk