获取文本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/
