如何获得输入框内的插入符位置?
我通过谷歌找到了一些资料,但都不是很可靠。理想情况下,可以使用类似于jQuery插件的东西来实现,这样就可以轻松地执行:
我通过谷歌找到了一些资料,但都不是很可靠。理想情况下,可以使用类似于jQuery插件的东西来实现,这样就可以轻松地执行:
$("#myinput").caretPosition()
$("#myinput").caretPosition()
更简单的更新方式:
使用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;
}
else if (oField.selectionStart || oField.selectionStart == '0')
could be else if (typeof oField.selectionStart==='number')
- user2428118document.selection
而不是field.selection
或其他什么。此外,在IE 7中可以选择某些内容,然后通过TAB键离开字段而不会失去选择。这样,当文本被选中但字段没有焦点时,document.selection
返回零选择。这就是为什么,在读取document.selection
之前,需要将焦点放在元素上以解决此错误的解决方法。 - bezmaxselectionStart
。它与所有主要浏览器兼容。
document.getElementById('foobar').addEventListener('keyup', e => {
console.log('Caret at: ', e.target.selectionStart)
})
<input id="foobar" />
仅在未定义类型或输入上的type="text"
或type="textarea"
时才有效。
.selectionStart
属性(document.getElementById('foobar').selectionStart
),它不必在事件侦听器内部。 - JJJ如果有人想使用,我已经将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);
input = $(this).get(0)
和 input = this
不是同一回事吗? - Micthis
指的是一个完整的包装集合。但他的代码仍然有误,正确的方式是 this.get(0)
。尽管如此,他的代码可能仍然有效,因为重新包装一个已经被包装的集合不会产生任何效果。 - Chev有一个非常简单的解决方案。使用以下代码并得到验证结果-
<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
el.selectionStart
等同于你的切片长度,请直接返回该值。此外,其他解决方案更加复杂的原因是它们处理不支持selectionStart
的其他浏览器。 - mpenf1
跟 'user2782001' 差不多没有意义。 - Michael ScheperinputElement.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);
}
(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);
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()
或类似Underscores的_debounce()
:
$('input[type="text"]').on('keyup mouseup mouseleave', function() {
caretPosition($(this));
});
如果您想试试,这里有一个Fiddle:https://jsfiddle.net/Dhaupin/91189tq7/
解决方案是.selectionStart
:
var input = document.getElementById('yourINPUTid');
input.selectionEnd = input.selectionStart = yourDESIREDposition;
input.focus();
.selectionEnd
,则会选择一些文本(S->E)。.focus()
;当您触发代码(onClick)时。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>