非常容易

Question

如何从输入字段中获取插入位置？

我通过谷歌发现了一些零碎的东西，但没有任何防弹措施。

基本上像jQuery插件这样的东西是理想的，所以我可以简单地做

$("#myinput").caretPosition()

Answer 1

更新更容易：

使用field.selectionStart example in this answer。

感谢@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;
}

Answer 2

很好，非常感谢Max。

如果有人想使用它，我已将其回答的功能包装到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);

Answer 3

非常容易

更新回答

使用selectionStart，它是compatible with all major browsers。

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})

<input id="foobar" />

更新：仅当未定义任何类型或输入时键入=“text”时，此功能才有效。

Answer 4

有一个非常简单的解决方案 。请尝试使用以下代码并验证结果 -

<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>

我正在给你fiddle_demo

Answer 5

   (function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
            // IE
           input.focus();
        }
        return 'selectionStart' in input ? input.selectionStart:'' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
     }
   })(jQuery);

Answer 6

现在有一个很好的插件：The Caret Plugin

然后，您可以使用$("#myTextBox").caret()获取排名，或通过$("#myTextBox").caret(position)

进行设置

Answer 7

这里有一些很好的答案，但我认为您可以简化代码并跳过对inputElement.selectionStart支持的检查：仅IE8及更早版本（参见documentation）不支持代表当前browser usage的不到1％。

var input = document.getElementById('myinput'); // or $('#myinput')[0]
var caretPos = input.selectionStart;

// and if you want to know if there is a selection or not inside your input:

if (input.selectionStart != input.selectionEnd)
{
    var selectionValue =
    input.value.substring(input.selectionStart, input.selectionEnd);
}

Answer 8

除了光标位置之外，您可能还需要一个选定的范围。这是一个简单的函数，你甚至不需要jQuery：

function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start >= 0 && start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start >= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}

让我们假设你想在输入时调用它，或者鼠标移动光标位置（在这种情况下我们使用jQuery .on()）。出于性能原因，如果事件涌入，最好添加setTimeout()或类似于下划线_debounce()的内容：

$('input[type="text"]').on('keyup mouseup mouseleave', function() {
    caretPosition($(this));
});

如果你想尝试一下，这是一个小提琴：https://jsfiddle.net/Dhaupin/91189tq7/

Answer 9

const inpT = document.getElementById("text-box");
const inpC = document.getElementById("text-box-content");
// swch gets  inputs .
var swch;
// swch  if corsur is active in inputs defaulte is false .
var isSelect = false;

var crnselect;
// on focus
function setSwitch(e) {
  swch = e;
  isSelect = true;
  console.log("set Switch: " + isSelect);
}
// on click ev
function setEmoji() {
  if (isSelect) {
    console.log("emoji added :)");
    swch.value += ":)";
    swch.setSelectionRange(2,2 );
    isSelect = true;
  }

}
// on not selected on input . 
function onout() {
  // الافنت  اون كي اب 
  crnselect = inpC.selectionStart;
  
  // return input select not active after 200 ms .
  var len = swch.value.length;
  setTimeout(() => {
   (len == swch.value.length)? isSelect = false:isSelect = true;
  }, 200);
}

<h1> Try it !</h1>
    
		<input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title">
		<input type="text" onfocus = "setSwitch(this)"  onfocusout = "onout()"  id="text-box-content" size="20" value="content">
<button onclick="setEmoji()">emogi :) </button>

Answer 10

非常简单的解决方案

我也花了很多时间在这个问题上！！！

解决方案非常非常非常简单：.selectionStart

所以代码是：

var input = document.getElementById('yourINPUTid');
input.selectionEnd = input.selectionStart = yourDESIREDposition;
input.focus();

备注：如果 .selectionEnd 没有被赋值，一些文本 (S-->E) 将被选中！！！

失去焦点时需要

.focus() ；当您触发代码时 ( onClick )

（我只在 CHROME 上测试过！！！）

祝你好运！！！

如果你想要更复杂的解决方案，你必须阅读其他答案！！！

获取文本输入字段中的光标位置（以字符为单位）

10 个答案:

非常容易

更新回答

非常简单的解决方案