我怎样才能从输入域中得到插入符号的位置?
我通过谷歌找到了一些碎片,但没有子弹。
基本上像一个jQuery插件将是理想的,所以我可以简单地做
$("#myinput").caretPosition()
我怎样才能从输入域中得到插入符号的位置?
我通过谷歌找到了一些碎片,但没有子弹。
基本上像一个jQuery插件将是理想的,所以我可以简单地做
$("#myinput").caretPosition()
当前回答
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>
其他回答
现在有一个很好的插件:插入插件
然后你可以得到的位置使用$("#myTextBox").caret()或设置它通过$("#myTextBox").caret(位置)
(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);
解决方案是.selectionStart:
var input = document.getElementById('yourINPUTid');
input.selectionEnd = input.selectionStart = yourDESIREDposition;
input.focus();
如果. selectionend没有被分配,一些文本(S—>E)将被选择。
当焦点丢失时需要.focus();当你触发你的代码(onClick)。
我只在Chrome上测试了这个功能。
如果你想要更复杂的答案,你必须阅读其他答案。
我已经将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);
有一个很简单的解决办法。 尝试以下代码的验证结果-
<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