猿问

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

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

如何从输入字段中获得插入符号位置?

我在谷歌上发现了一些零碎的东西,但没有防弹作用。

基本上,像jQuery插件这样的东西是理想的,所以我可以简单地做。

$("#myinput").caretPosition()


白板的微信
浏览 699回答 4
4回答

汪汪一只猫

更容易更新:使用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;}

跃然一笑

很好多亏了麦克斯。如果有人想要使用jQuery,我已经将他的答案中的功能封装到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);

回首忆惘然

很容易更新答复使用selectionStart,是的与所有主要浏览器兼容.document.getElementById('foobar').addEventListener('keyup', e => {&nbsp; console.log('Caret at: ', e.target.selectionStart)})<input id="foobar" />UPDATE:只有在输入中没有定义类型或type=“text”时,这才有效。

猛跑小猪

有一个非常简单的解决方案..尝试以下代码有验证的结果-<html><head><script> &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;f1(el)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val&nbsp;=&nbsp;el.value; &nbsp;&nbsp;&nbsp;&nbsp;alert(val.slice(0,&nbsp;el.selectionStart).length);}</script></head><body><input&nbsp;type=text&nbsp;id=t1&nbsp;value=abcd> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;onclick="f1(document.getElementById('t1'))">check&nbsp;position</button></body></html>我给你小提琴演示
随时随地看视频慕课网APP
我要回答