获取文本输入域中的光标位置(以字符为单位)

小开

最佳答案

更容易更新:

使用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;
}

小开

我已经将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);

小开

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

小开

< p > 有一个非常简单的解决方案。试试下面的代码验证结果-

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

小开

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

然后你可以使用$("#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)');
}
}

让我们假设你想要在输入改变或鼠标移动光标位置时调用它(在这种情况下，我们使用jQuery .on())。出于性能考虑，如果事件大量涌入，添加setTimeout()或下划线_debounce()之类的东西可能是个好主意:

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

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

小开

使用selectionStart。它是兼容所有主流浏览器。

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

<input id="foobar" />

This works only when no type is defined or type="text" or type="textarea" on the input.

小开

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>

小开

解决方案是.selectionStart:

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

如果.selectionEnd未被赋值，则会选择一些文本(S—>E)。

当焦点丢失时需要.focus();当你触发你的代码(onClick)。

我只在Chrome上测试了这个功能。

如果你想要更复杂的答案，你必须阅读其他答案。