获取文本input字段中的光标位置(以字符为单位)

如何从input字段中获取插入符号的位置?

我已经通过Googlefind了一些零碎的东西,但是没有什么可以certificate的。

基本上像jQuery插件是理想的,所以我可以简单地做

$("#myinput").caretPosition() 

find这个解决scheme 不是jQuery的基础,但没有问题,将其集成到jQuery中:

 /* ** Returns the caret (cursor) position of the specified text field. ** 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.selectionStart; // Return results return iCaretPos; } 

很好,非常感谢Max。

如果有人想使用它,我已经将他的答案中的function包装到了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); 

有一个非常简单的解决scheme 使用已validation的结果尝试以下代码 –

 <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

  (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); 

现在有一个很好的插件: 插入插件

然后你可以调用$("#myTextBox").caret()或者设置$("#myTextBox").caret(position)

这里有几个很好的答案,但我认为你可以简化你的代码,并跳过对inputElement.selectionStart支持的检查:它不支持IE8和更早的版本(参见文档 ),它代表了当前浏览器的不到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); } 

也许你需要一个选定的范围,除了光标位置。 这里是一个简单的函数,你甚至不需要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)'); } } 

假设你想在input发生变化时调用它,或者鼠标移动光标位置(在这种情况下,我们使用jQuery .on() )。 出于性能方面的原因,如果事件涌入,添加setTimeout()或类似下划线_debounce()可能是一个好主意。

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

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