blocks|key|778186|text|我有两个职能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778187|function+setSelectionRange(input,+selectionStart,+selectionEnd)+{
++if+(input.setSelectionRange)+{
++++input.focus();
++++input.setSelectionRange(selectionStart,+selectionEnd);
++}
++else+if+(input.createTextRange)+{
++++var+range+=+input.createTextRange();
++++range.collapse(true);
++++range.moveEnd('character',+selectionEnd);
++++range.moveStart('character',+selectionStart);
++++range.select();
++}
}

function+setCaretToPos+(input,+pos)+{
++setSelectionRange(input,+pos,+pos);
}|code-block|syntax|javascript|778188|然后您可以像这样使用setCaretToPos：|778189|setCaretToPos(document.getElementById("YOURINPUT"),+4);|778190|使用textarea和input进行实例化，显示来自jQuery的用法：|offset|length|style|CODE|778191|​|778192|function+setSelectionRange(input,+selectionStart,+selectionEnd)+{
++if+(input.setSelectionRange)+{
++++input.focus();
++++input.setSelectionRange(selectionStart,+selectionEnd);
++}+else+if+(input.createTextRange)+{
++++var+range+=+input.createTextRange();
++++range.collapse(true);
++++range.moveEnd('character',+selectionEnd);
++++range.moveStart('character',+selectionStart);
++++range.select();
++}
}

function+setCaretToPos(input,+pos)+{
++setSelectionRange(input,+pos,+pos);
}

$("#set-textarea").click(function()+{
++setCaretToPos($("#the-textarea")[0],+10)
});
$("#set-input").click(function()+{
++setCaretToPos($("#the-input")[0],+10);
});|778193|<textarea+id="the-textarea"+cols="40"+rows="4">Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</textarea>
 <input+type="button"+id="set-textarea"+value="Set+in+textarea">
 <input+id="the-input"+type="text"+size="40"+value="Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit">
 <input+type="button"+id="set-input"+value="Set+in+input">
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>|778194|778195|到2016年，Chrome，火狐，IE11，甚至IE8都在进行测试和工作(参见最后的这里；堆栈片段不支持IE8)。|778196|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/sujoxosepo^0|0|0|0|0|2|8|B|5|0|0|0|0|0|16|2|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1B|8|@$M|1C|N|1D|O|P]|$M|1E|N|1F|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|W|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1K|8|@]|9|@$M|1L|N|1M|1|1N]]|A|$]]|$1|Z|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

I have two functions:

<pre><code>function setSelectionRange(input, selectionStart, selectionEnd) {
 if (input.setSelectionRange) {
 input.focus();
 input.setSelectionRange(selectionStart, selectionEnd);
 }
 else if (input.createTextRange) {
 var range = input.createTextRange();
 range.collapse(true);
 range.moveEnd('character', selectionEnd);
 range.moveStart('character', selectionStart);
 range.select();
 }
}

function setCaretToPos (input, pos) {
 setSelectionRange(input, pos, pos);
}
</code></pre>

Then you can use setCaretToPos like this:

<pre><code>setCaretToPos(document.getElementById("YOURINPUT"), 4);
</code></pre>

Live example with both a <code>textarea</code> and an <code>input</code>, showing use from jQuery:

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function setSelectionRange(input, selectionStart, selectionEnd) {
 if (input.setSelectionRange) {
 input.focus();
 input.setSelectionRange(selectionStart, selectionEnd);
 } else if (input.createTextRange) {
 var range = input.createTextRange();
 range.collapse(true);
 range.moveEnd('character', selectionEnd);
 range.moveStart('character', selectionStart);
 range.select();
 }
}

function setCaretToPos(input, pos) {
 setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
 setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
 setCaretToPos($("#the-input")[0], 10);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="the-textarea" cols="40" rows="4"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/textarea&gt;
&lt;br&gt;&lt;input type="button" id="set-textarea" value="Set in textarea"&gt;
&lt;br&gt;&lt;input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit"&gt;
&lt;br&gt;&lt;input type="button" id="set-input" value="Set in input"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>


As of 2016, tested and working on Chrome, Firefox, IE11, even IE8 (see that last <a href="http://jsbin.com/sujoxosepo" rel="noreferrer">here</a>; Stack Snippets don't support IE8).

blocks|key|2021239|text|下面是一个jQuery解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2021240|$.fn.selectRange+=+function(start,+end)+{
++++if(end+===+undefined)+{
++++++++end+=+start;
++++}
++++return+this.each(function()+{
++++++++if('selectionStart'+in+this)+{
++++++++++++this.selectionStart+=+start;
++++++++++++this.selectionEnd+=+end;
++++++++}+else+if(this.setSelectionRange)+{
++++++++++++this.setSelectionRange(start,+end);
++++++++}+else+if(this.createTextRange)+{
++++++++++++var+range+=+this.createTextRange();
++++++++++++range.collapse(true);
++++++++++++range.moveEnd('character',+end);
++++++++++++range.moveStart('character',+start);
++++++++++++range.select();
++++++++}
++++});
};|code-block|syntax|javascript|2021241|有了这个，你就可以|2021242|$('#elem').selectRange(3,5);+//+select+a+range+of+text
$('#elem').selectRange(3);+//+set+cursor+position|2021243|JsFiddle|unordered-list-item|offset|length|2021244|JsBin|2021245|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mnpenner/WpqsN/2291/|1|https://jsbin.com/vayoso/1/edit?html,js,output^0|0|0|0|0|0|8|0|0|0|5|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|M|7|15|8|@]|9|@$N|16|O|17|1|18]]|A|$]]|$1|P|3|Q|5|M|7|19|8|@]|9|@$N|1A|O|1B|1|1C]]|A|$]]|$1|R|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]]]

Here's a jQuery solution:

<pre><code>$.fn.selectRange = function(start, end) {
 if(end === undefined) {
 end = start;
 }
 return this.each(function() {
 if('selectionStart' in this) {
 this.selectionStart = start;
 this.selectionEnd = end;
 } else if(this.setSelectionRange) {
 this.setSelectionRange(start, end);
 } else if(this.createTextRange) {
 var range = this.createTextRange();
 range.collapse(true);
 range.moveEnd('character', end);
 range.moveStart('character', start);
 range.select();
 }
 });
};
</code></pre>

With this, you can do

<pre><code>$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position
</code></pre>

<ul>
<li><a href="http://jsfiddle.net/mnpenner/WpqsN/2291/" rel="noreferrer">JsFiddle</a></li>
<li><a href="https://jsbin.com/vayoso/1/edit?html,js,output" rel="noreferrer">JsBin</a></li>
</ul>

blocks|key|488416|text|在IE中，要在某个位置移动光标，这段代码就足够了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488417|var+range+=+elt.createTextRange();
range.move('character',+pos);
range.select();|code-block|syntax|javascript|488418|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In IE to move cursor on some position this code is enough:

<pre><code>var range = elt.createTextRange();
range.move('character', pos);
range.select();
</code></pre>

blocks|key|778225|text|我用的是：http://plugins.jquery.com/project/jCaret|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|778226|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/jCaret^0|5|14|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I'm using this: <a href="http://plugins.jquery.com/project/jCaret" rel="noreferrer">http://plugins.jquery.com/project/jCaret</a>

blocks|key|488436|text|在Mac上的Safari+5上，jQuery+1.4上，这对我起了作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488437|$("Selector")[elementIx].selectionStart+=+desiredStartPos;+
$("Selector")[elementIx].selectionEnd+=+desiredEndPos;|code-block|syntax|javascript|488438|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me on Safari 5 on Mac OSX, jQuery 1.4:

<pre><code>$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;
</code></pre>

blocks|key|777209|text|如果您使用箭头键，请记住在函数调用后立即返回false，否则Chrome就会打开。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|777210|{
++++document.getElementById('moveto3').setSelectionRange(3,3);
++++return+false;
}|code-block|syntax|javascript|777211|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just remember to return false right after the function call if you're using the arrow keys since Chrome fricks the frack up otherwise.

<pre><code>{
 document.getElementById('moveto3').setSelectionRange(3,3);
 return false;
}
</code></pre>

blocks|key|2021290|text|我找到了一个对我有用的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2021291|$.fn.setCursorPosition+=+function(position){
++++if(this.length+==+0)+return+this;
++++return+$(this).setSelection(position,+position);
}

$.fn.setSelection+=+function(selectionStart,+selectionEnd)+{
++++if(this.length+==+0)+return+this;
++++var+input+=+this[0];

++++if+(input.createTextRange)+{
++++++++var+range+=+input.createTextRange();
++++++++range.collapse(true);
++++++++range.moveEnd('character',+selectionEnd);
++++++++range.moveStart('character',+selectionStart);
++++++++range.select();
++++}+else+if+(input.setSelectionRange)+{
++++++++input.focus();
++++++++input.setSelectionRange(selectionStart,+selectionEnd);
++++}

++++return+this;
}

$.fn.focusEnd+=+function(){
++++this.setCursorPosition(this.val().length);
++++++++++++return+this;
}|code-block|syntax|javascript|2021292|现在，您可以通过调用以下命令将焦点移到任何元素的末尾：|2021293|$(element).focusEnd();|2021294|或者你指定职位。|2021295|$(element).setCursorPosition(3);+//+This+will+focus+on+the+third+character.|2021296|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I found a solution that works for me:

<pre><code>$.fn.setCursorPosition = function(position){
 if(this.length == 0) return this;
 return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
 if(this.length == 0) return this;
 var input = this[0];

 if (input.createTextRange) {
 var range = input.createTextRange();
 range.collapse(true);
 range.moveEnd('character', selectionEnd);
 range.moveStart('character', selectionStart);
 range.select();
 } else if (input.setSelectionRange) {
 input.focus();
 input.setSelectionRange(selectionStart, selectionEnd);
 }

 return this;
}

$.fn.focusEnd = function(){
 this.setCursorPosition(this.val().length);
 return this;
}
</code></pre>

Now you can move the focus to the end of any element by calling:

<pre><code>$(element).focusEnd();
</code></pre>

Or you specify the position.

<pre><code>$(element).setCursorPosition(3); // This will focus on the third character.
</code></pre>

blocks|key|2021317|text|如果不存在setSelectionRange，则可以直接更改原型。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2021318|(function()+{
++++if+(!HTMLInputElement.prototype.setSelectionRange)+{
++++++++HTMLInputElement.prototype.setSelectionRange+=+function(start,+end)+{
++++++++++++if+(this.createTextRange)+{
++++++++++++++++var+range+=+this.createTextRange();
++++++++++++++++this.collapse(true);
++++++++++++++++this.moveEnd('character',+end);
++++++++++++++++this.moveStart('character',+start);
++++++++++++++++this.select();
++++++++++++}
++++++++}
++++}
})();
document.getElementById("input_tag").setSelectionRange(6,+7);|code-block|syntax|javascript|2021319|jsFiddle链路|offset|length|2021320|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/anoop26667/CHrfc/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can directly change the prototype if setSelectionRange does not exist.

<pre><code>(function() {
 if (!HTMLInputElement.prototype.setSelectionRange) {
 HTMLInputElement.prototype.setSelectionRange = function(start, end) {
 if (this.createTextRange) {
 var range = this.createTextRange();
 this.collapse(true);
 this.moveEnd('character', end);
 this.moveStart('character', start);
 this.select();
 }
 }
 }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);
</code></pre>

<a href="http://jsfiddle.net/anoop26667/CHrfc/" rel="nofollow">jsFiddle</a> link

blocks|key|778254|text|基于这个问题，当文本区域中有新的行时，这个答案将不能很好地适用于ie和opera。回答解释如何在调用setSelectionRange之前调整selectionStart，selectionEnd。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|778255|我用@AVProgrammer提出的解决方案尝试了另一个问题中的adjustOffset，它可以工作。|778256|function+adjustOffset(el,+offset)+{
++++/*+From+https://stackoverflow.com/a/8928945/611741+*/
++++var+val+=+el.value,+newOffset+=+offset;
++++if+(val.indexOf("\r\n")+>+-1)+{
++++++++var+matches+=+val.replace(/\r\n/g,+"\n").slice(0,+offset).match(/\n/g);
++++++++newOffset+%2B=+matches+?+matches.length+:+0;
++++}
++++return+newOffset;
}

$.fn.setCursorPosition+=+function(position){
++++/*+From+https://stackoverflow.com/a/7180862/611741+*/
++++if(this.lengh+==+0)+return+this;
++++return+$(this).setSelection(position,+position);
}

$.fn.setSelection+=+function(selectionStart,+selectionEnd)+{
++++/*+From+https://stackoverflow.com/a/7180862/611741+
+++++++modified+to+fit+https://stackoverflow.com/a/8928945/611741+*/
++++if(this.lengh+==+0)+return+this;
++++input+=+this[0];

++++if+(input.createTextRange)+{
++++++++var+range+=+input.createTextRange();
++++++++range.collapse(true);
++++++++range.moveEnd('character',+selectionEnd);
++++++++range.moveStart('character',+selectionStart);
++++++++range.select();
++++}+else+if+(input.setSelectionRange)+{
++++++++input.focus();
++++++++selectionStart+=+adjustOffset(input,+selectionStart);
++++++++selectionEnd+=+adjustOffset(input,+selectionEnd);
++++++++input.setSelectionRange(selectionStart,+selectionEnd);
++++}

++++return+this;
}

$.fn.focusEnd+=+function(){
++++/*+From+https://stackoverflow.com/a/7180862/611741+*/
++++this.setCursorPosition(this.val().length);
}|code-block|syntax|javascript|778257|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8928660/setselectionrange-not-behaving-the-same-way-across-browsers|1|https://stackoverflow.com/a/8928945/611741^0|4|2|0|15|2|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Based on this <a href="https://stackoverflow.com/questions/8928660/setselectionrange-not-behaving-the-same-way-across-browsers">question</a>, the answer will not work perfectly for ie and opera when there is new line in the textarea. 
The <a href="https://stackoverflow.com/a/8928945/611741">answer</a> explain how to adjust the selectionStart, selectionEnd before calling setSelectionRange.

I have try the adjustOffset from the other question with the solution proposed by @AVProgrammer and it work.

<pre><code>function adjustOffset(el, offset) {
 /* From https://stackoverflow.com/a/8928945/611741 */
 var val = el.value, newOffset = offset;
 if (val.indexOf("\r\n") &gt; -1) {
 var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
 newOffset += matches ? matches.length : 0;
 }
 return newOffset;
}

$.fn.setCursorPosition = function(position){
 /* From https://stackoverflow.com/a/7180862/611741 */
 if(this.lengh == 0) return this;
 return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
 /* From https://stackoverflow.com/a/7180862/611741 
 modified to fit https://stackoverflow.com/a/8928945/611741 */
 if(this.lengh == 0) return this;
 input = this[0];

 if (input.createTextRange) {
 var range = input.createTextRange();
 range.collapse(true);
 range.moveEnd('character', selectionEnd);
 range.moveStart('character', selectionStart);
 range.select();
 } else if (input.setSelectionRange) {
 input.focus();
 selectionStart = adjustOffset(input, selectionStart);
 selectionEnd = adjustOffset(input, selectionEnd);
 input.setSelectionRange(selectionStart, selectionEnd);
 }

 return this;
}

$.fn.focusEnd = function(){
 /* From https://stackoverflow.com/a/7180862/611741 */
 this.setCursorPosition(this.val().length);
}
</code></pre>

blocks|key|777245|text|对我在比特桶中找到的代码的小修改|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|777246|如果给定2个位置，代码现在可以选择/突出显示起始点/结束点。在FF/Chrome/IE9/Opera中测试并运行良好。|777247|$('#field').caret(1,+9);|code-block|syntax|javascript|777248|代码列在下面，只更改了几行代码：|777249|(function($)+{
++$.fn.caret+=+function(pos)+{
++++var+target+=+this[0];
++++if+(arguments.length+==+0)+{+//get
++++++if+(target.selectionStart)+{+//DOM
++++++++var+pos+=+target.selectionStart;
++++++++return+pos+>+0+?+pos+:+0;
++++++}
++++++else+if+(target.createTextRange)+{+//IE
++++++++target.focus();
++++++++var+range+=+document.selection.createRange();
++++++++if+(range+==+null)
++++++++++++return+'0';
++++++++var+re+=+target.createTextRange();
++++++++var+rc+=+re.duplicate();
++++++++re.moveToBookmark(range.getBookmark());
++++++++rc.setEndPoint('EndToStart',+re);
++++++++return+rc.text.length;
++++++}
++++++else+return+0;
++++}

++++//set
++++var+pos_start+=+pos;
++++var+pos_end+=+pos;

++++if+(arguments.length+>+1)+{
++++++++pos_end+=+arguments[1];
++++}

++++if+(target.setSelectionRange)+//DOM
++++++target.setSelectionRange(pos_start,+pos_end);
++++else+if+(target.createTextRange)+{+//IE
++++++var+range+=+target.createTextRange();
++++++range.collapse(true);
++++++range.moveEnd('character',+pos_end);
++++++range.moveStart('character',+pos_start);
++++++range.select();
++++}
++}
})(jQuery)|777250|entityMap|0|LINK|mutability|MUTABLE|url|http://code.accursoft.com/caret/wiki/Home^0|3|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

Small modification to the code I found in <a href="http://code.accursoft.com/caret/wiki/Home" rel="nofollow">bitbucket</a>

Code is now able to select/highlight with start/end points if given 2 positions.
Tested and works fine in FF/Chrome/IE9/Opera.

<pre><code>$('#field').caret(1, 9);
</code></pre>

The code is listed below, only a few lines changed:

<pre><code>(function($) {
 $.fn.caret = function(pos) {
 var target = this[0];
 if (arguments.length == 0) { //get
 if (target.selectionStart) { //DOM
 var pos = target.selectionStart;
 return pos &gt; 0 ? pos : 0;
 }
 else if (target.createTextRange) { //IE
 target.focus();
 var range = document.selection.createRange();
 if (range == null)
 return '0';
 var re = target.createTextRange();
 var rc = re.duplicate();
 re.moveToBookmark(range.getBookmark());
 rc.setEndPoint('EndToStart', re);
 return rc.text.length;
 }
 else return 0;
 }

 //set
 var pos_start = pos;
 var pos_end = pos;

 if (arguments.length &gt; 1) {
 pos_end = arguments[1];
 }

 if (target.setSelectionRange) //DOM
 target.setSelectionRange(pos_start, pos_end);
 else if (target.createTextRange) { //IE
 var range = target.createTextRange();
 range.collapse(true);
 range.moveEnd('character', pos_end);
 range.moveStart('character', pos_start);
 range.select();
 }
 }
})(jQuery)
</code></pre>

blocks|key|488520|text|因此，在将文本插入文本区域之前设置焦点？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488521|$("#comments").focus();
$("#comments").val(comments);|code-block|syntax|javascript|488522|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Set the focus before you have inserted the text into the textarea thus?

<pre><code>$("#comments").focus();
$("#comments").val(comments);
</code></pre>

blocks|key|777275|text|这是用铬做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|777276|$('#input').focus(function()+{
++++setTimeout(+function()+{
++++++++document.getElementById('input').selectionStart+=+4;
++++++++document.getElementById('input').selectionEnd+=+4;
++++},+1);
});|code-block|syntax|javascript|777277|显然，您需要延迟一微秒或更长的时间，因为通常用户通过单击要覆盖的文本字段中的某个位置(或单击选项卡)来聚焦文本字段，因此必须等到用户单击设置位置后再更改。|777278|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This works for me in chrome

<pre><code>$('#input').focus(function() {
 setTimeout( function() {
 document.getElementById('input').selectionStart = 4;
 document.getElementById('input').selectionEnd = 4;
 }, 1);
});
</code></pre>

Apparently you need a delay of a microsecond or more, because usually a user focusses on the text field by clicking at some position in the text field (or by hitting tab) which you want to override, so you have to wait till the position is set by the user click and then change it.

blocks|key|488567|text|我确实意识到这是一个非常古老的帖子，但我认为我应该提供一个简单的解决方案，只使用jQuery更新它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488568|function+getTextCursorPosition(ele)+{+++
++++return+ele.prop("selectionStart");
}

function+setTextCursorPosition(ele,pos)+{
++++ele.prop("selectionStart",+pos+%2B+1);
++++ele.prop("selectionEnd",+pos+%2B+1);
}

function+insertNewLine(text,cursorPos)+{
++++var+firstSlice+=+text.slice(0,cursorPos);
++++var+secondSlice+=+text.slice(cursorPos);

++++var+new_text+=+[firstSlice,"\n",secondSlice].join('');

++++return+new_text;
}|code-block|syntax|javascript|488569|使用ctrl-enter添加一个新行(如在Facebook中)：|488570|$('textarea').on('keypress',function(e){
++++if+(e.keyCode+==+13+&&+!e.ctrlKey)+{
++++++++e.preventDefault();
++++++++//do+something+special+here+with+just+pressing+Enter
++++}else+if+(e.ctrlKey){
++++++++//If+the+ctrl+key+was+pressed+with+the+Enter+key,
++++++++//then+enter+a+new+line+break+into+the+text
++++++++var+cursorPos+=+getTextCursorPosition($(this));++++++++++++++++

++++++++$(this).val(insertNewLine($(this).val(),+cursorPos));
++++++++setTextCursorPosition($(this),+cursorPos);
++++}
});|488571|我愿意接受批评。谢谢。|488572|更新:此解决方案不允许正常复制和粘贴功能(即ctrl-c，ctrl-v)，因此我将不得不在今后编辑此功能，以确保该部分再次工作。如果你知道如何做到这一点，请在这里评论，我将很高兴测试出来。谢谢。|488573|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I do realize that this is a very old post, but I thought that I should offer perhaps a simpler solution to update it using only jQuery.

<pre><code>function getTextCursorPosition(ele) { 
 return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
 ele.prop("selectionStart", pos + 1);
 ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
 var firstSlice = text.slice(0,cursorPos);
 var secondSlice = text.slice(cursorPos);

 var new_text = [firstSlice,"\n",secondSlice].join('');

 return new_text;
}
</code></pre>

Usage for using ctrl-enter to add a new line (like in Facebook):

<pre><code>$('textarea').on('keypress',function(e){
 if (e.keyCode == 13 &amp;&amp; !e.ctrlKey) {
 e.preventDefault();
 //do something special here with just pressing Enter
 }else if (e.ctrlKey){
 //If the ctrl key was pressed with the Enter key,
 //then enter a new line break into the text
 var cursorPos = getTextCursorPosition($(this)); 

 $(this).val(insertNewLine($(this).val(), cursorPos));
 setTextCursorPosition($(this), cursorPos);
 }
});
</code></pre>

I am open to critique. Thank you.

UPDATE: This solution does not allow normal copy and paste functionality to work (i.e. ctrl-c, ctrl-v), so I will have to edit this in the future to make sure that part works again. If you have an idea how to do that, please comment here, and I will be happy to test it out. Thanks.

blocks|key|778298|text|我必须让这个方法适用于可满足的元素和jQuery，而且可能有人希望它可以随时使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|778299|$.fn.getCaret+=+function(n)+{
++++var+d+=+$(this)[0];
++++var+s,+r;
++++r+=+document.createRange();
++++r.selectNodeContents(d);
++++s+=+window.getSelection();
++++console.log('position:+'%2Bs.anchorOffset%2B'+of+'%2Bs.anchorNode.textContent.length);
++++return+s.anchorOffset;
};

$.fn.setCaret+=+function(n)+{
++++var+d+=+$(this)[0];
++++d.focus();
++++var+r+=+document.createRange();
++++var+s+=+window.getSelection();
++++r.setStart(d.childNodes[0],+n);
++++r.collapse(true);
++++s.removeAllRanges();
++++s.addRange(r);
++++console.log('position:+'%2Bs.anchorOffset%2B'+of+'%2Bs.anchorNode.textContent.length);
++++return+this;
};|code-block|syntax|javascript|778300|Usage+$(selector).getCaret()返回数字偏移量，$(selector).setCaret(num)建立偏移量集并将焦点设置在元素上。|offset|length|style|CODE|778301|还有一个小提示，如果您从控制台运行$(selector).setCaret(num)，它将返回console.log，但是您不会将焦点可视化，因为它是在控制台窗口中建立的。|778302|击败;D|778303|entityMap^0|0|0|6|M|10|P|0|H|P|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$I|10|J|11|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

I had to get this working for contenteditable elements and jQuery and tought someone might want it ready to use:

<pre><code>$.fn.getCaret = function(n) {
 var d = $(this)[0];
 var s, r;
 r = document.createRange();
 r.selectNodeContents(d);
 s = window.getSelection();
 console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
 return s.anchorOffset;
};

$.fn.setCaret = function(n) {
 var d = $(this)[0];
 d.focus();
 var r = document.createRange();
 var s = window.getSelection();
 r.setStart(d.childNodes[0], n);
 r.collapse(true);
 s.removeAllRanges();
 s.addRange(r);
 console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
 return this;
};
</code></pre>

Usage <code>$(selector).getCaret()</code> returns the number offset and <code>$(selector).setCaret(num)</code> establishes the offeset and sets focus on element.

Also a small tip, if you run <code>$(selector).setCaret(num)</code> from console it will return the console.log but you won't visualize the focus since it is established at the console window.

Bests ;D

blocks|key|2021487|text|对于我来说，通过光标位置在textarea中添加文本(Tab+->+\t)和保存光标焦点的最容易的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2021488|$('#text').keyup(function+()+{
++++var+cursor+=+$('#text').prop('selectionStart');
++++//if+cursot+is+first+in+textarea
++++if+(cursor+==+0)+{
++++++++//i+will+add+tab+in+line
++++++++$('#text').val('\t'+%2B+$('#text').val());
++++++++//here+we+set+the+cursor+position
++++++++$('#text').prop('selectionEnd',+1);
++++}+else+{
++++++++var+value+=+$('#text').val();
++++++++//save+the+value+before+cursor+current+position
++++++++var+valToCur+=+value.substring(0,+cursor);
++++++++//save+the+value+after+cursor+current+position
++++++++var+valAfter+=+value.substring(cursor,+value.length);
++++++++//save+the+new+value+with+added+tab+in+text
++++++++$('#text').val(valToCur+%2B+'\t'+%2B+valAfter);
++++++++//set+focus+of+cursot+after+insert+text+(1+=+because+I+add+only+one+symbol)
++++++++$('#text').prop('selectionEnd',+cursor+%2B+1);
++++}
});|code-block|syntax|javascript|2021489|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

As for me here the most easily way to add text(Tab -&gt; \t) in textarea by cursor position and save the focus on cursor:
<pre><code>$('#text').keyup(function () {
 var cursor = $('#text').prop('selectionStart');
 //if cursot is first in textarea
 if (cursor == 0) {
 //i will add tab in line
 $('#text').val('\t' + $('#text').val());
 //here we set the cursor position
 $('#text').prop('selectionEnd', 1);
 } else {
 var value = $('#text').val();
 //save the value before cursor current position
 var valToCur = value.substring(0, cursor);
 //save the value after cursor current position
 var valAfter = value.substring(cursor, value.length);
 //save the new value with added tab in text
 $('#text').val(valToCur + '\t' + valAfter);
 //set focus of cursot after insert text (1 = because I add only one symbol)
 $('#text').prop('selectionEnd', cursor + 1);
 }
});
</code></pre>

How do you set the cursor position in a text field using jQuery? I've got a text field with content, and I want the users cursor to be positioned at a certain offset when they focus on the field. The code should look kind of like this:

<pre><code>$('#input').focus(function() {
 $(this).setCursorPosition(4);
});
</code></pre>

What would the implementation of that setCursorPosition function look like? If you had a text field with the content abcdefg, this call would result in the cursor being positioned as follows: abcd**|**efg.

Java has a similar function, setCaretPosition. Does a similar method exist for javascript?

Update: I modified CMS's code to work with jQuery as follows:

<pre><code>new function($) {
 $.fn.setCursorPosition = function(pos) {
 if (this.setSelectionRange) {
 this.setSelectionRange(pos, pos);
 } else if (this.createTextRange) {
 var range = this.createTextRange();
 range.collapse(true);
 if(pos &lt; 0) {
 pos = $(this).val().length + pos;
 }
 range.moveEnd('character', pos);
 range.moveStart('character', pos);
 range.select();
 }
 }
}(jQuery);
</code></pre>

jQuery Set Cursor Position in Text Area

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何使用jQuery设置文本字段中的光标位置？我有一个包含内容的文本字段，当用户聚焦于该字段时，我希望用户的光标定位在特定的偏移量上。代码看起来应该是这样的：$('#input').focus(function() {  $(this).setCursorPosition(4);});这个setCursorPositi...

问jQuery设置光标在文本区域的位置
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery设置光标在文本区域的位置EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery设置光标在文本区域的位置
EN