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://stackoverflow.com/a/2897510/3371119，但它对我不起作用（在chrome中）。

Jsfiddle：http://jsfiddle.net/prankol57/zbaaky5z/2/

修改：我已确认selectionStart in input返回true。那么为什么会抛出错误？

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.

Answer 2

也许简单地计算输入字符串的字符串长度会更容易？这样您就可以支持所有浏览器：

$("input").keyup(function() 
{
  var tempString = $("input").val();
  $("p").html("Cursor position at " + tempString.length).appendTo("body");
});

获取光标位置输入类型编号

2 个答案: