blocks|key|1027120|text|使用selectionStart。它是compatible+with+all+major+browsers。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1027121|​|1027122|document.getElementById('foobar').addEventListener('keyup',+e+=>+{
++console.log('Caret+at:+',+e.target.selectionStart)
})|code-block|syntax|javascript|1027123|<input+id="foobar"+/>|1027124|1027125|仅当输入上未定义类型或未定义type="text"或type="textarea"时，此方法才有效。|1027126|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=selectionStart^0|2|E|J|Y|0|0|0|0|0|0|E|B|Q|F|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>Use <code>selectionStart</code>. It is <a href="https://caniuse.com/#search=selectionStart" rel="noreferrer">compatible with all major browsers</a>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('foobar').addEventListener('keyup', e =&gt; {
  console.log('Caret at: ', e.target.selectionStart)
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="foobar" /&gt;</code></pre>
</div>
</div>
</p>
<p>This works only when no type is defined or <code>type=&quot;text&quot;</code> or <code>type=&quot;textarea&quot;</code> on the input.</p>


blocks|key|1026834|text|我已经将bezmax's+answer中的功能封装到jQuery中，如果有人想使用它的话。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1026835|(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);|code-block|syntax|javascript|1026836|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/2897229/6243352^0|4|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I've wrapped the functionality in <a href="https://stackoverflow.com/a/2897229/6243352">bezmax's answer</a> into jQuery if anyone wants to use it.</p>
<pre><code>(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);
</code></pre>


blocks|key|1241778|text|现在有一个很好的插件来解决这个问题：The+Caret+Plugin|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1241779|然后，您可以使用$("#myTextBox").caret()或通过$("#myTextBox").caret(position)设置位置|style|CODE|1241780|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/caret/^0|I|G|0|0|8|N|Y|V|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]|$A|W|B|X|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>There is now a nice plugin for this: <a href="http://plugins.jquery.com/caret/" rel="nofollow noreferrer">The Caret Plugin</a></p>

<p>Then you can get the position using <code>$("#myTextBox").caret()</code> or set it via <code>$("#myTextBox").caret(position)</code></p>


blocks|key|1241672|text|+++(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:''+%7C%7C+Math.abs(document.selection.createRange().moveStart('character',+-input.value.length));
+++++}
+++})(jQuery);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1241673|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>   (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);
</code></pre>


blocks|key|1027012|text|这里有一些很好的答案，但我认为你可以简化你的代码，跳过对inputElement.selectionStart支持的检查:它不仅仅在IE8和更早的版本(参见documentation)上支持，它只占当前browser+usage的不到1%25。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1027013|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);
}|code-block|syntax|javascript|1027014|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#Browser_compatibility|1|http://caniuse.com/usage-table^0|S|R|26|D|0|2T|D|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>There are a few good answers posted here, but I think you can simplify your code and skip the check for <code>inputElement.selectionStart</code> support: it is not supported only on IE8 and earlier (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#Browser_compatibility">documentation</a>) which represents less than 1% of the current <a href="http://caniuse.com/usage-table">browser usage</a>.</p>

<pre><code>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);
}
</code></pre>


blocks|key|1241933|text|也许除了光标位置之外，您还需要一个选定的范围。这是一个简单的函数，你甚至不需要jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1241934|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:+'+%2B+start);
++++}+else+if+(start+>=+0)+{
++++++++//+do+ranged+select+actions,+example:
++++++++console.log('Cursor+Position:+'+%2B+start+%2B+'+to+'+%2B+end+%2B+'+('+%2B+diff+%2B+'+selected+chars)');
++++}
}|code-block|syntax|javascript|1241935|假设你想在输入改变或鼠标移动光标位置时调用它(在本例中，我们使用的是jQuery+.on())。出于性能原因，如果事件大量涌入，添加setTimeout()或类似下划线_debounce()的内容可能是一个好主意：|offset|length|style|CODE|1241936|$('input[type="text"]').on('keyup+mouseup+mouseleave',+function()+{
++++caretPosition($(this));
});|1241937|如果你想尝试一下，这里有一把小提琴：https://jsfiddle.net/Dhaupin/91189tq7/|1241938|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Dhaupin/91189tq7/^0|0|0|15|5|1U|C|2C|B|0|0|I|12|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@$I|19|J|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Perhaps you need a selected range in addition to cursor position. Here is a simple function, you don't even need jQuery:</p>

<pre><code>function caretPosition(input) {
    var start = input[0].selectionStart,
        end = input[0].selectionEnd,
        diff = end - start;

    if (start &gt;= 0 &amp;&amp; start == end) {
        // do cursor position actions, example:
        console.log('Cursor Position: ' + start);
    } else if (start &gt;= 0) {
        // do ranged select actions, example:
        console.log('Cursor Position: ' + start + ' to ' + end + ' (' + diff + ' selected chars)');
    }
}
</code></pre>

<p>Let's say you wanna call it on an input whenever it changes or mouse moves cursor position (in this case we are using jQuery <code>.on()</code>). For performance reasons, it may be a good idea to add <code>setTimeout()</code> or something like Underscores <code>_debounce()</code> if events are pouring in:</p>

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

<p>Here is a fiddle if you wanna try it out: <a href="https://jsfiddle.net/Dhaupin/91189tq7/" rel="nofollow">https://jsfiddle.net/Dhaupin/91189tq7/</a></p>


blocks|key|1242003|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1242004|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:+"+%2B+isSelect);
}
//+on+click+ev
function+setEmoji()+{
++if+(isSelect)+{
++++console.log("emoji+added+:)");
++++swch.value+%2B=+":)";
++++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);
}|code-block|syntax|javascript|1242005|<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>|1242006|1242007|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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(() =&gt; {
   (len == swch.value.length)? isSelect = false:isSelect = true;
  }, 200);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt; Try it !&lt;/h1&gt;
    
		&lt;input type="text" onfocus = "setSwitch(this)" onfocusout = "onout()" id="text-box" size="20" value="title"&gt;
		&lt;input type="text" onfocus = "setSwitch(this)"  onfocusout = "onout()"  id="text-box-content" size="20" value="content"&gt;
&lt;button onclick="setEmoji()"&gt;emogi :) &lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1242070|text|解决方案是.selectionStart|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1242071|var+input+=+document.getElementById('yourINPUTid');
input.selectionEnd+=+input.selectionStart+=+yourDESIREDposition;
input.focus();|code-block|syntax|javascript|1242072|如果未分配.selectionEnd，则会选择一些文本(S-->E)。|1242073|当焦点丢失时，当您触发代码(onClick)时，需要.focus()。|1242074|我只在Chrome上测试过。|1242075|如果你想要更复杂的解决方案，你必须阅读其他答案。|1242076|entityMap^0|5|F|0|0|5|D|0|Q|8|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

<p>The solution is <code>.selectionStart</code>:</p>
<pre><code>var input = document.getElementById('yourINPUTid');
input.selectionEnd = input.selectionStart = yourDESIREDposition;
input.focus();
</code></pre>
<p>If <code>.selectionEnd</code> is not assiged, some text (S--&gt;E) will be selected.</p>
<p><code>.focus()</code> is required when the focus is lost; when you trigger your code (onClick).</p>
<p>I only tested this in Chrome.</p>
<p>If you want more complicated solutions, you have to read the other answers.</p>


<p>How can I get the caret position from within an input field?</p>

<p>I have found a few bits and pieces via Google, but nothing bullet proof.</p>

<p>Basically something like a jQuery plugin would be ideal, so I could simply do</p>

<pre><code>$("#myinput").caretPosition()
</code></pre>


Get cursor position (in characters) within a text Input field

jQuery

如何从输入字段中获取插入符号的位置？我已经通过谷歌找到了一些零碎的东西，但没有任何防弹的东西。基本上，像jQuery插件这样的东西是理想的，所以我可以简单地做$("#myinput").caretPosition()

问获取文本输入字段中的光标位置(以字符为单位
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取文本输入字段中的光标位置(以字符为单位EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取文本输入字段中的光标位置(以字符为单位
EN