为了账号安全,请及时绑定邮箱和手机立即绑定

在文本输入字段中获取光标位置(以字符为单位)

在文本输入字段中获取光标位置(以字符为单位)

在文本输入字段中获取光标位置(以字符为单位)如何从输入字段中获得插入符号位置?我在谷歌上发现了一些零碎的东西,但没有防弹作用。基本上,像jQuery插件这样的东西是理想的,所以我可以简单地做。$("#myinput").caretPosition()
查看完整描述

4 回答

?
汪汪一只猫

TA贡献1898条经验 获得超8个赞

更容易更新:

使用field.selectionStart 这个答案中的例子.

感谢@CommonSenseCode指出这一点。


旧答案:

找到了这个解决方案。不是基于jQuery的,但是将它集成到jQuery中没有问题:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;}


查看完整回答
反对 回复 2019-06-16
?
跃然一笑

TA贡献1826条经验 获得超6个赞

很好多亏了麦克斯。

如果有人想要使用jQuery,我已经将他的答案中的功能封装到jQuery中。

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }})(jQuery);


查看完整回答
反对 回复 2019-06-16
?
回首忆惘然

TA贡献1847条经验 获得超11个赞

很容易

更新答复

使用selectionStart,是的与所有主要浏览器兼容.

document.getElementById('foobar').addEventListener('keyup', e => {

  console.log('Caret at: ', e.target.selectionStart)

})

<input id="foobar" />

UPDATE:只有在输入中没有定义类型或type=“text”时,这才有效。


查看完整回答
反对 回复 2019-06-16
?
猛跑小猪

TA贡献1858条经验 获得超8个赞

有一个非常简单的解决方案..尝试以下代码有验证的结果-

<html><head><script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);}</script></head><body><input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button></body></html>

我给你小提琴演示


查看完整回答
反对 回复 2019-06-16
  • 4 回答
  • 0 关注
  • 698 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信