我怎样才能从输入域中得到插入符号的位置?
我通过谷歌找到了一些碎片,但没有子弹。
基本上像一个jQuery插件将是理想的,所以我可以简单地做
$("#myinput").caretPosition()
我怎样才能从输入域中得到插入符号的位置?
我通过谷歌找到了一些碎片,但没有子弹。
基本上像一个jQuery插件将是理想的,所以我可以简单地做
$("#myinput").caretPosition()
当前回答
这里有一些很好的答案,但我认为你可以简化你的代码,跳过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);
}
其他回答
使用selectionStart。它与所有主流浏览器兼容。
document.getElementById(“foobar')。addEventListener('keyup', e => { console.log('插入符号at: ', e.target.selectionStart) }) <输入id="foobar" />
只有当输入中没有定义类型或type="text"或type="textarea"时,这种方法才有效。
更容易更新:
使用字段。在这个答案中选择启动示例。
感谢@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;
}
我已经将bezmax的答案中的功能包装成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);
这里有一些很好的答案,但我认为你可以简化你的代码,跳过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)');
}
}
假设你想在输入改变或鼠标移动光标位置时调用它(在这种情况下,我们使用jQuery .on())。出于性能考虑,如果事件大量涌入,添加setTimeout()或下划线_debounce()之类的东西可能是个好主意:
$('input[type="text"]').on('keyup mouseup mouseleave', function() {
caretPosition($(this));
});
这里有一个小提琴,如果你想尝试一下:https://jsfiddle.net/Dhaupin/91189tq7/