blocks|key|3511128|text|我在IE中也遇到过同样的问题(在通过RJS/prototype设置焦点之后)。当字段已经有一个值时，Firefox已经将光标留在了结尾处。IE将光标强制移动到文本的开头。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3511129|我得出的解决方案如下：|3511130|<input+id="search"+type="text"+value="mycurrtext"+size="30"+
+++++++onfocus="this.value+=+this.value;"+name="search"/>|code-block|syntax|javascript|3511131|这在IE7和FF3中都有效|3511132|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I faced this same issue (after setting focus through RJS/prototype) in IE.
Firefox was already leaving the cursor at the end when there is already a value for the field. IE was forcing the cursor to the beginning of the text.</p>

<p>The solution I arrived at is as follows:</p>

<pre><code>&lt;input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/&gt;
</code></pre>

<p>This works in both IE7 and FF3</p>


blocks|key|1009835|text|在仔细研究了一下之后，我发现最好的方法是使用setSelectionRange函数，如果浏览器支持它；如果不支持，则恢复使用Mike+Berrow的答案中的方法(即将值替换为自身)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1009836|我还将scrollTop设置为一个较高的值，以防我们处于可垂直滚动的textarea中。(在火狐和Chrome中使用任意的高值似乎比$(this).height()更可靠。)|1009837|我已经把它做成了一个jQuery插件。(如果您没有使用jQuery，我相信您仍然可以很容易地理解要点。)|1009838|我测试过IE6，IE7，IE8，Firefox3.5.5，Google+Chrome3.0，Safari4.0.4，Opera10.00。|1009839|它在jquery.com上以PutCursorAtEnd+plugin的形式提供。为方便起见，1.0版本的代码如下：|1009840|//+jQuery+plugin:+PutCursorAtEnd+1.0
//+http://plugins.jquery.com/project/PutCursorAtEnd
//+by+teedyay
//
//+Puts+the+cursor+at+the+end+of+a+textbox/+textarea

//+codesnippet:+691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
++++jQuery.fn.putCursorAtEnd+=+function()
++++{
++++return+this.each(function()
++++{
++++++++$(this).focus()

++++++++//+If+this+function+exists...
++++++++if+(this.setSelectionRange)
++++++++{
++++++++//+...+then+use+it
++++++++//+(Doesn't+work+in+IE)

++++++++//+Double+the+length+because+Opera+is+inconsistent+about+whether+a+carriage+return+is+one+character+or+two.+Sigh.
++++++++var+len+=+$(this).val().length+*+2;
++++++++this.setSelectionRange(len,+len);
++++++++}
++++++++else
++++++++{
++++++++//+...+otherwise+replace+the+contents+with+itself
++++++++//+(Doesn't+work+in+Google+Chrome)
++++++++$(this).val($(this).val());
++++++++}

++++++++//+Scroll+to+the+bottom,+in+case+we're+in+a+tall+textarea
++++++++//+(Necessary+for+Firefox+and+Google+Chrome)
++++++++this.scrollTop+=+999999;
++++});
++++};
})(jQuery);|code-block|syntax|javascript|1009841|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/PutCursorAtEnd^0|M|H|0|3|9|Y|8|1U|G|0|0|0|E|L|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|N|3|O|5|P|7|1G|8|@]|D|@]|E|$Q|R]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>After hacking around with this a bit, I found the best way was to use the <code>setSelectionRange</code> function if the browser supports it; if not, revert to using the method in Mike Berrow's answer (i.e. replace the value with itself).</p>

<p>I'm also setting <code>scrollTop</code> to a high value in case we're in a vertically-scrollable <code>textarea</code>. (Using an arbitrary high value seems more reliable than <code>$(this).height()</code> in Firefox and Chrome.)</p>

<p>I've made it is as a jQuery plugin. (If you're not using jQuery I trust you can still get the gist easily enough.)</p>

<p>I've tested in IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00.</p>

<p>It's available on jquery.com as the <a href="http://plugins.jquery.com/project/PutCursorAtEnd" rel="noreferrer">PutCursorAtEnd plugin</a>. For your convenience, the code for release 1.0 is as follows:</p>

<pre><code>// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);
</code></pre>


blocks|key|294031|text|试试这个，它对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294032|//input+is+the+input+element

input.focus();+//sets+focus+to+element
var+val+=+this.input.value;+//store+the+value+of+the+element
this.input.value+=+'';+//clear+the+value+of+the+element
this.input.value+=+val;+//set+that+value+back.++|code-block|syntax|javascript|294033|为了将光标移动到末尾，输入必须首先具有焦点，然后当值更改时，它将移动到末尾。如果您将.value设置为相同的值，它在chrome中不会改变。|294034|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|$]]

<p>Try this, it has worked for me:</p>

<pre><code>//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  
</code></pre>

<p>For the cursor to be move to the end, the input has to have focus first, then when the value is changed it will goto the end.  If you set .value to the same, it won't change in chrome.</p>


blocks|key|3511277|text|在jQuery中，这是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3511278|$(document).ready(function+()+{
++$('input').focus(function+()+{
++++$(this).attr('value',$(this).attr('value'));
++}
}|code-block|syntax|javascript|3511279|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|$]]

<p>In jQuery, that's  </p>

<pre><code>$(document).ready(function () {
  $('input').focus(function () {
    $(this).attr('value',$(this).attr('value'));
  }
}
</code></pre>


blocks|key|1009870|text|如果输入字段只需要一个静态默认值，我通常使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1009871|$('#input').focus().val('Default+value');|code-block|syntax|javascript|1009872|这似乎适用于所有浏览器。|1009873|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|$]]

<p>If the input field just needs a static default value I usually do this with jQuery:</p>

<pre><code>$('#input').focus().val('Default value');
</code></pre>

<p>This seems to work in all browsers.</p>


blocks|key|1014645|text|仍然需要中间变量(参见var+val=)，否则游标的行为会很奇怪，我们需要在最后使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014646|<body+onload="document.getElementById('userinput').focus();">
<form>
<input+id="userinput"+onfocus="var+val=this.value;+this.value='';+this.value=+val;"
+++++++++class=large+type="text"+size="10"+maxlength="50"+value="beans"+name="myinput">
</form>
</body>|code-block|syntax|javascript|1014647|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|$]]

<p>Still the intermediate variable is needed, (see var val=)
else the cursor behaves strange, we need it at the end.</p>

<pre><code>&lt;body onload="document.getElementById('userinput').focus();"&gt;
&lt;form&gt;
&lt;input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput"&gt;
&lt;/form&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1009924|text|我之前尝试过这些建议，但没有一个对我有效(在Chrome上测试了它们)，所以我写了自己的代码-它在Firefox，IE，Safari，Chrome上运行良好……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1009925|在Textarea中：|1009926|onfocus()+=+sendCursorToEnd(this);|code-block|syntax|javascript|1009927|在Javascript中：|1009928|function+sendCursorToEnd(obj)+{+
var+value+=+obj.value;+//store+the+value+of+the+element
var+message+=+"";
if+(value+!=+"")+{
++++message+=+value+%2B+"\n";
};
$(obj).focus().val(message);}|1009929|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I tried the suggestions before but none worked for me (tested them in Chrome), so I wrote my own code - and it works fine in Firefox, IE, Safari, Chrome...</p>

<p>In Textarea:</p>

<pre><code>onfocus() = sendCursorToEnd(this);
</code></pre>

<p>In Javascript:</p>

<pre><code>function sendCursorToEnd(obj) { 
var value = obj.value; //store the value of the element
var message = "";
if (value != "") {
    message = value + "\n";
};
$(obj).focus().val(message);}
</code></pre>


blocks|key|4359092|text|将单击文本区域时的光标设置为文本末尾...此代码的变体is...ALSO可以工作！适用于Firefox、IE、Safari、Chrome..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4359093|在服务器端代码中：|4359094|txtAddNoteMessage.Attributes.Add("onClick",+"sendCursorToEnd('"+&+txtAddNoteMessage.ClientID+&+"');")|code-block|syntax|javascript|4359095|在Javascript中：|4359096|function+sendCursorToEnd(obj)+{
++++var+value+=++$(obj).val();+//store+the+value+of+the+element
++++var+message+=+"";
++++if+(value+!=+"")+{
++++++++message+=+value+%2B+"\n";
+++++};
++++$(obj).focus().val(message);
++++$(obj).unbind();
+}|4359097|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Set the cursor when click on text area to the end of text...
Variation  of this code is...ALSO works! for  Firefox, IE, Safari, Chrome..</p>

<p>In server-side code:</p>

<pre><code>txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" &amp; txtAddNoteMessage.ClientID &amp; "');")
</code></pre>

<p>In Javascript:</p>

<pre><code>function sendCursorToEnd(obj) {
    var value =  $(obj).val(); //store the value of the element
    var message = "";
    if (value != "") {
        message = value + "\n";
     };
    $(obj).focus().val(message);
    $(obj).unbind();
 }
</code></pre>


blocks|key|294224|text|<script+type="text/javascript">++
++++function+SetEnd(txt)+{++
++++++if+(txt.createTextRange)+{++
+++++++//IE++
+++++++var+FieldRange+=+txt.createTextRange();++
+++++++FieldRange.moveStart('character',+txt.value.length);++
+++++++FieldRange.collapse();++
+++++++FieldRange.select();++
+++++++}++
++++++else+{++
+++++++//Firefox+and+Opera++
+++++++txt.focus();++
+++++++var+length+=+txt.value.length;++
+++++++txt.setSelectionRange(length,+length);++
++++++}++
++++}+++
</script>++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|294225|这个函数适用于IE9、Firefox6.x和Opera11.x|unstyled|294226|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;script type="text/javascript"&gt;  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
&lt;/script&gt;  
</code></pre>

<p>This function works for me in IE9, Firefox 6.x, and Opera 11.x</p>


blocks|key|4359141|text|我刚刚发现在iOS中，每次设置textarea.textContent属性都会将光标放在文本区域元素中的文本末尾。该行为是我的应用程序中的一个错误，但似乎是你可以故意使用的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4359142|entityMap^0|F|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I just found that in iOS, setting <code>textarea.textContent</code> property will place the cursor at the end of the text in the textarea element every time. The behavior was a bug in my app, but seems to be something that you could use intentionally.</p>


blocks|key|294266|text|我已经在chrome中尝试了下面的代码，并取得了很大的成功|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294267|$("input.focus").focus(function+()+{
++++var+val+=+this.value,
++++++++$this+=+$(this);
++++$this.val("");

++++setTimeout(function+()+{
++++++++$this.val(val);
++++},+1);
});|code-block|syntax|javascript|294268|快速总结：|294269|它获取每个带有类焦点的输入字段，然后将输入字段的旧值存储在一个变量中，然后将空字符串应用于输入字段。|294270|然后等待1毫秒，并再次输入旧值。|294271|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I've tried the following with quite great success in chrome</p>

<pre><code>$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});
</code></pre>

<p>Quick rundown:</p>

<p>It takes every input field with the class focus on it, then stores the old value of the input field in a variable, afterwards it applies the empty string to the input field.</p>

<p>Then it waits 1 milisecond and puts in the old value again.</p>


blocks|key|294273|text|input+=+$('input');+
input.focus().val(input.val()%2B'.');+
if+(input.val())+{input.attr('value',+input.val().substr(0,input.val().length-1));}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|294274|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>input = $('input'); 
input.focus().val(input.val()+'.'); 
if (input.val()) {input.attr('value', input.val().substr(0,input.val().length-1));}
</code></pre>


blocks|key|1010014|text|好吧，我只是使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010015|$("#myElement").val($("#myElement").val());|code-block|syntax|javascript|1010016|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|$]]

<p>Well, I just use:</p>

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


blocks|key|294349|text|有一种简单的方法可以让它在大多数浏览器中运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294350|this.selectionStart+=+this.selectionEnd+=+this.value.length;|code-block|syntax|javascript|294351|然而，由于一些浏览器的*怪癖，一个更具包容性的答案看起来更像这样|294352|setTimeout(function(){+that.selectionStart+=+that.selectionEnd+=+10000;+},+0);|294353|使用jQuery+(用于设置监听器，否则不是必需的)|offset|length|style|BOLD|294354|​|294355|$('#el').focus(function(){
++var+that+=+this;
++setTimeout(function(){+that.selectionStart+=+that.selectionEnd+=+10000;+},+0);
});|294356|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input+id='el'+type='text'+value='put+cursor+at+end'>|294357|294358|使用Vanilla+JS的(从借用addEvent函数)|CODE|294359|294360|//+Basic+cross+browser+addEvent
function+addEvent(elem,+event,+fn){
if(elem.addEventListener){
++elem.addEventListener(event,+fn,+false);
}else{
++elem.attachEvent("on"+%2B+event,
++function(){+return(fn.call(elem,+window.event));+});
}}
var+element+=+document.getElementById('el');

addEvent(element,'focus',function(){
++var+that+=+this;
++setTimeout(function(){+that.selectionStart+=+that.selectionEnd+=+10000;+},+0);
});|294361|<input+id='el'+type='text'+value='put+cursor+at+end'>|294362|294363|294364|怪癖|294365|Chrome有一个奇怪的怪癖，在光标移动到字段之前会触发focus事件；这会把我的简单解决方案搞砸。解决此问题的两个选项：|294366|您可以添加0毫秒的超时(到defer+the+operation+until+the+stack+is+clear)|294367|You可以将|unordered-list-item|294368|从focus更改为mouseup。这对用户来说是相当烦人的，除非你仍然跟踪焦点。我并不是真的喜欢这两个选项。|ordered-list-item|294369|294370|294371|此外，@vladkras指出，当Opera有空格时，一些旧版本的Opera会错误地计算长度。为此，您可以使用一个应该大于字符串的大数字。|294372|entityMap|0|LINK|mutability|MUTABLE|url|https://youtu.be/8aGhZQkoFbQ?t=15m13s^0|0|0|0|0|0|8|0|0|0|0|0|D|F|H|8|0|0|1|0|0|0|0|1|0|0|0|2|0|0|1P|0|0|1M|D|18|0|0|0|6|0|0|1I|1|5|9|7|0|0|0|0|1W|0^^$0|@$1|2|3|4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1Z|8|@$M|20|N|21|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|22|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|23|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|D|7|24|8|@]|9|@]|A|$E|F]]|$1|W|3|R|5|6|7|25|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|26|8|@$M|27|N|28|O|P]|$M|29|N|2A|O|Z]]|9|@]|A|$]]|$1|10|3|R|5|6|7|2B|8|@$M|2C|N|2D|O|P]]|9|@]|A|$]]|$1|11|3|12|5|D|7|2E|8|@]|9|@]|A|$E|F]]|$1|13|3|14|5|D|7|2F|8|@]|9|@]|A|$E|F]]|$1|15|3|R|5|6|7|2G|8|@$M|2H|N|2I|O|P]]|9|@]|A|$]]|$1|16|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2K|8|@$M|2L|N|2M|O|P]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2N|8|@$M|2O|N|2P|O|P]]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2Q|8|@$M|2R|N|2S|O|P]]|9|@$M|2T|N|2U|1|2V]]|A|$]]|$1|1D|3|1E|5|1F|7|2W|8|@$M|2X|N|2Y|O|P]]|9|@]|A|$]]|$1|1G|3|1H|5|1I|7|2Z|8|@$M|30|N|31|O|P]|$M|32|N|33|O|Z]|$M|34|N|35|O|Z]]|9|@]|A|$]]|$1|1J|3|-4|5|6|7|36|8|@]|9|@]|A|$]]|$1|1K|3|-4|5|6|7|37|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|38|8|@$M|39|N|3A|O|P]]|9|@]|A|$]]|$1|1N|3|-4|5|6|7|3B|8|@]|9|@]|A|$]]]|1O|$1P|$5|1Q|1R|1S|A|$1T|1U]]]]

<p>There's a simple way to get it working in <em>most</em> browsers.</p>

<pre><code>this.selectionStart = this.selectionEnd = this.value.length;
</code></pre>

<p>However, due to the *quirks of a few browsers, a more inclusive answer looks more like this</p>

<pre><code>setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
</code></pre>

<p><strong>Using jQuery</strong> <em>(to set the listener, but it's not necessary otherwise)</em></p>

<p><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>$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input id='el' type='text' value='put cursor at end'&gt;</code></pre>
</div>
</div>
  </p>

<p><strong>Using Vanilla JS</strong>  <em>(borrowing <code>addEvent</code> function from <a href="https://stackoverflow.com/a/10150042/731314">this answer</a>)</em></p>

<p><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>// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id='el' type='text' value='put cursor at end'&gt;</code></pre>
</div>
</div>
</p>

<hr>

<h2>Quirks</h2>

<p>Chrome has an odd quirk where the focus event fires before the cursor is moved into the field; which screws my simple solution up.  Two options to fix this:</p>

<ol>
<li>You can add a timeout of 0 ms (to <a href="https://youtu.be/8aGhZQkoFbQ?t=15m13s" rel="noreferrer">defer the operation until the stack is clear</a>)</li>
<li>You can change the event from <code>focus</code> to <code>mouseup</code>. This would be pretty annoying for the user unless you still kept track of focus. I'm not really in love with either of these options.</li>
</ol>

<p>Also, @vladkras pointed out that some older versions of Opera incorrectly calculate the length when it has spaces. For this you can use a huge number that should be larger than your string.</p>


blocks|key|3511662|text|这是我的答案的jsFiddle+demo。演示使用CoffeeScript，但如果需要，您也可以使用convert+it+to+plain+JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3511663|在JavaScript中，重要的部分是：|3511664|var+endIndex+=+textField.value.length;
if+(textField.setSelectionRange)+{
+++textField.setSelectionRange(endIndex,+endIndex);
}|code-block|syntax|javascript|3511665|我之所以发布这个答案，是因为我已经为其他有同样问题的人写了这个答案。这个答案不像这里的前几个答案涵盖那么多的边缘情况，但它适用于我，并且有一个jsFiddle演示，你可以使用它。|3511666|以下是jsFiddle中的代码，因此即使jsFiddle消失，此答案也会保留：|3511667|moveCursorToEnd+=+(textField)+->
++endIndex+=+textField.value.length
++if+textField.setSelectionRange
++++textField.setSelectionRange(endIndex,+endIndex)

jQuery+->
++$('.that-field').on+'click',+->
++++moveCursorToEnd(this)|3511668|<div+class="field">
++++<label+for="pressure">Blood+pressure</label>:
++++<input+class="that-field"+type="text"+name="pressure"+id="pressure"+value="24">
</div>
<p>
++++Try+clicking+in+the+text+field.+The+cursor+will+always+jump+to+the+end.
</p>|3511669|body+{
++++margin:+1em;
}

.field+{
++++margin-bottom:+1em;
}|3511670|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/MEPBA/|1|http://coffeescript.org/#try%253amoveCursorToEnd%2520%253D%2520%2528textField%2529%2520-%253E%250A%2520%2520endIndex%2520%253D%2520textField.value.length%250A%2520%2520if%2520textField.setSelectionRange%250A%2520%2520%2520%2520textField.setSelectionRange%2528endIndex%252C%2520endIndex%2529%250A%250AjQuery%2520-%253E%250A%2520%2520%2524%2528%2527.that-field%2527%2529.on%2520%2527click%2527%252C%2520-%253E%250A%2520%2520%2520%2520moveCursorToEnd%2528this%2529^0|7|D|0|1E|U|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]|$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1E|8|@]|9|@]|C|$]]|$1|O|3|P|5|H|7|1F|8|@]|9|@]|C|$I|J]]|$1|Q|3|R|5|H|7|1G|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

<p>Here’s a <a href="http://jsfiddle.net/MEPBA/" rel="nofollow">jsFiddle demo</a> of my answer. The demo uses CoffeeScript, but you can <a href="http://coffeescript.org/#try%3amoveCursorToEnd%20%3D%20%28textField%29%20-%3E%0A%20%20endIndex%20%3D%20textField.value.length%0A%20%20if%20textField.setSelectionRange%0A%20%20%20%20textField.setSelectionRange%28endIndex%2C%20endIndex%29%0A%0AjQuery%20-%3E%0A%20%20%24%28%27.that-field%27%29.on%20%27click%27%2C%20-%3E%0A%20%20%20%20moveCursorToEnd%28this%29" rel="nofollow">convert it to plain JavaScript</a> if you need to.</p>

<p>The important part, in JavaScript:</p>

<pre class="lang-js prettyprint-override"><code>var endIndex = textField.value.length;
if (textField.setSelectionRange) {
   textField.setSelectionRange(endIndex, endIndex);
}
</code></pre>

<p>I’m posting this answer because I already wrote it for someone else who had the same question. This answer doesn’t cover as many edge cases as the top answers here, but it works for me, and has a jsFiddle demo you can play with.</p>

<p>Here is the code from the jsFiddle, so this answer is preserved even if the jsFiddle disappears:</p>

<pre class="lang-coffee prettyprint-override"><code>moveCursorToEnd = (textField) -&gt;
  endIndex = textField.value.length
  if textField.setSelectionRange
    textField.setSelectionRange(endIndex, endIndex)

jQuery -&gt;
  $('.that-field').on 'click', -&gt;
    moveCursorToEnd(this)
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;div class="field"&gt;
    &lt;label for="pressure"&gt;Blood pressure&lt;/label&gt;:
    &lt;input class="that-field" type="text" name="pressure" id="pressure" value="24"&gt;
&lt;/div&gt;
&lt;p&gt;
    Try clicking in the text field. The cursor will always jump to the end.
&lt;/p&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>body {
    margin: 1em;
}

.field {
    margin-bottom: 1em;
}
</code></pre>


blocks|key|1010063|text|对于所有情况下的所有浏览器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010064|function+moveCursorToEnd(el)+{
++++window.setTimeout(function+()+{
++++++++++++if+(typeof+el.selectionStart+==+"number")+{
++++++++++++el.selectionStart+=+el.selectionEnd+=+el.value.length;
++++++++}+else+if+(typeof+el.createTextRange+!=+"undefined")+{
++++++++++++var+range+=+el.createTextRange();
++++++++++++range.collapse(false);
++++++++++++range.select();
++++++++}
++++},+1);
}|code-block|syntax|javascript|1010065|如果需要从onFocus事件处理程序中移动光标，则需要超时|1010066|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|$]]

<p>For all browsers for all cases:</p>

<pre><code>function moveCursorToEnd(el) {
    window.setTimeout(function () {
            if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }, 1);
}
</code></pre>

<p><em>Timeout required if you need to move cursor from onFocus event handler</em></p>


blocks|key|1014795|text|尝试以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014796|$('input').focus(function+()+{
++++$(this).val($(this).val());
}).focus()|code-block|syntax|javascript|1014797|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|$]]

<p>Try the following code:</p>

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


blocks|key|1010092|text|很简单。编辑或更改值时，请先将焦点放在焦点上，然后再设置值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010093|$("#catg_name").focus();
$("#catg_name").val(catg_name);|code-block|syntax|javascript|1010094|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|$]]

<p>Simple. When editing or changing values, first put the focus then set value.</p>

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


blocks|key|1010124|text|这个问题很有趣。最令人困惑的是，我发现没有一个解决方案完全解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010125|%2B%2B%2B%2B%2B%2B%2B解决方案%2B%2B%2B%2B%2B%2B%2B|1010126|1010127|您需要一个JS函数，如下所示：|ordered-list-item|1010128|1010129|function+moveCursorToEnd(obj)+{+if+(!(+obj.updating+))+{+obj.updating+=+true；var+oldValue+=+obj.value；obj.value+=+''；setTimeout(function(){+obj.value+=+oldValue；obj.updating=+false；}，100)；}}|1010130|您需要在onfocus和onclick事件中调用此对象。|unordered-list-item|1010131|1010132|1010133|它可以在所有设备和浏览器上运行！|1010134|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|W|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|Z|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|S|$]]

<p>This problem is interesting. The most confusing thing about it is that no solution I found solved the problem completely.</p>

<p>+++++++ SOLUTION +++++++</p>

<ol>
<li><p>You need a JS function, like this:</p>

<pre><code>function moveCursorToEnd(obj) {

  if (!(obj.updating)) {
    obj.updating = true;
    var oldValue = obj.value;
    obj.value = '';
    setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100);
  }

}
</code></pre></li>
<li><p>You need to call this guy in the onfocus and onclick events.</p>

<pre><code>&lt;input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)"&gt;
</code></pre></li>
</ol>

<p>IT WORKS ON ALL DEVICES AN BROWSERS!!!!</p>


blocks|key|294573|text|var+valsrch+=+$('#search').val();
$('#search').val('').focus().val(valsrch);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|294574|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>var valsrch = $('#search').val();
$('#search').val('').focus().val(valsrch);
</code></pre>


blocks|key|294594|text|接受一些答案..创建一个单行jquery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294595|$('#search').focus().val($('#search').val());|code-block|syntax|javascript|294596|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|$]]

<p>Taking some of the answers .. making a single-line jquery.</p>

<pre><code>$('#search').focus().val($('#search').val());
</code></pre>


blocks|key|4359537|text|虽然这可能是一个有很多答案的老问题，但我遇到了类似的问题，没有一个答案是我想要的和/或没有得到很好的解释。selectionStart和selectionEnd属性的问题在于它们不适用于输入类型number+(虽然问题是针对文本类型提出的，但我认为这可能会对其他需要关注其他输入类型的人有所帮助)。因此，如果您不知道函数将关注的输入类型是否是类型号，则不能使用该解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4359538|跨浏览器且适用于所有输入类型的解决方案非常简单：|4359539|4359540|获取输入的值并将其存储在变量中|unordered-list-item|4359541|4359542|将输入的值设置为存储值|4359543|4359544|这样，光标就位于输入元素的末尾。|4359545|所以你所要做的就是这样(使用jquery，假设你希望关注的元素选择器可以通过点击的元素的'+data+-+focus+-+element‘数据属性来访问，并且函数在点击'.foo’元素后执行)：|4359546|$('.foo').click(function()+{
++++element_selector+=+$(this).attr('data-focus-element');
++++$focus+=+$(element_selector);
++++value+=+$focus.val();
++++$focus.focus();
++++$focus.val(value);
});|code-block|syntax|javascript|4359547|为什么这是可行的？简单地说，当调用.focus()时，焦点将被添加到input元素的开头(这是这里的核心问题)，而忽略了input元素已经有一个值这一事实。但是，当输入的值发生更改时，光标将自动放置在输入元素内的值的末尾。因此，如果您使用先前在输入中输入的相同值覆盖该值，则该值看起来没有变化，但是光标将移动到末尾。|4359548|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|11|8|@]|9|@]|A|$]]|$1|H|3|-4|5|G|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|G|7|13|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|16|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|17|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|18|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|X|$]]

<p>While this may be an old question with lots of answers, I ran across a similar issue and none of the answers were quite what I wanted and/or were poorly explained. The issue with selectionStart and selectionEnd properties is that they don't exist for input type number (while the question was asked for text type, I reckon it might help others who might have other input types that they need to focus). So if you don't know whether the input type the function will focus is a type number or not, you cannot use that solution.</p>

<p>The solution that works cross browser and for all input types is rather simple:</p>

<ul>
<li>get and store the value of input in a variable</li>
<li>focus the input</li>
<li>set the value of input to the stored value</li>
</ul>

<p>That way the cursor is at the end of the input element. <br/>
So all you'd do is something like this (using jquery, provided the element selector that one wishes to focus is accessible via 'data-focus-element' data attribute of the clicked element and the function executes after clicking on '.foo' element):</p>

<pre><code>$('.foo').click(function() {
    element_selector = $(this).attr('data-focus-element');
    $focus = $(element_selector);
    value = $focus.val();
    $focus.focus();
    $focus.val(value);
});
</code></pre>

<p>Why does this work? Simply, when the .focus() is called, the focus will be added to the beginning of the input element (which is the core problem here), ignoring the fact, that the input element already has a value in it. However, when the value of an input is changed, the cursor is automatically placed at the end of the value inside input element. So if you override the value with the same value that had been previously entered in the input, the value will look untouched, the cursor will, however, move to the end.</p>


blocks|key|1014900|text|如果先设置值，然后再设置焦点，则光标将始终显示在结尾处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014901|$("#search-button").click(function+(event)+{
++++event.preventDefault();
++++$('#textbox').val('this');
++++$("#textbox").focus();
++++return+false;
});|code-block|syntax|javascript|1014902|下面是测试https://jsfiddle.net/5on50caf/1/的方法|offset|length|1014903|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5on50caf/1/^0|0|0|5|W|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]]]]

<p>If you set the value first and then set the focus, the cursor will always appear at the end.</p>

<pre><code>$("#search-button").click(function (event) {
    event.preventDefault();
    $('#textbox').val('this');
    $("#textbox").focus();
    return false;
});
</code></pre>

<p>Here is the fiddle to test 
<a href="https://jsfiddle.net/5on50caf/1/" rel="nofollow noreferrer">https://jsfiddle.net/5on50caf/1/</a></p>


blocks|key|3511945|text|我很喜欢这个公认的答案，但它在Chrome中不起作用。在Chrome中，为了让光标移动到末尾，需要更改输入值。解决方案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3511946|<input+id="search"+type="text"+value="mycurrtext"+size="30"+
+++onfocus="var+value+=+this.value;+this.value+=+null;+this.value+=+value;"+name="search"/>|code-block|syntax|javascript|3511947|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|$]]

<p>I like the accepted answer a lot, but it stopped working in Chrome. In Chrome, for the cursor to go to the end, input value needs to change. The solution is as follow:</p>

<pre><code>&lt;input id="search" type="text" value="mycurrtext" size="30" 
   onfocus="var value = this.value; this.value = null; this.value = value;" name="search"/&gt;
</code></pre>


blocks|key|294762|text|我想把光标放在"div“元素的末尾，其中contenteditable+=+true，然后我用Xeoncross+code解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|294763|<input+type="button"+value="Paste+HTML"+onclick="document.getElementById('test').focus();+pasteHtmlAtCaret('<b>INSERTED</b>');+">

<div+id="test"+contenteditable="true">
++++Here+is+some+nice+text
</div>|code-block|syntax|javascript|294764|这个函数会变魔术：|294765|+function+pasteHtmlAtCaret(html)+{
++++var+sel,+range;
++++if+(window.getSelection)+{
++++++++//+IE9+and+non-IE
++++++++sel+=+window.getSelection();
++++++++if+(sel.getRangeAt+&&+sel.rangeCount)+{
++++++++++++range+=+sel.getRangeAt(0);
++++++++++++range.deleteContents();

++++++++++++//+Range.createContextualFragment()+would+be+useful+here+but+is
++++++++++++//+non-standard+and+not+supported+in+all+browsers+(IE9,+for+one)
++++++++++++var+el+=+document.createElement("div");
++++++++++++el.innerHTML+=+html;
++++++++++++var+frag+=+document.createDocumentFragment(),+node,+lastNode;
++++++++++++while+(+(node+=+el.firstChild)+)+{
++++++++++++++++lastNode+=+frag.appendChild(node);
++++++++++++}
++++++++++++range.insertNode(frag);

++++++++++++//+Preserve+the+selection
++++++++++++if+(lastNode)+{
++++++++++++++++range+=+range.cloneRange();
++++++++++++++++range.setStartAfter(lastNode);
++++++++++++++++range.collapse(true);
++++++++++++++++sel.removeAllRanges();
++++++++++++++++sel.addRange(range);
++++++++++++}
++++++++}
++++}+else+if+(document.selection+&&+document.selection.type+!=+"Control")+{
++++++++//+IE+<+9
++++++++document.selection.createRange().pasteHTML(html);
++++}
}|294766|适用于大多数浏览器，请检查，这段代码将文本和焦点放在div元素(不是input元素)中的文本末尾。|294767|https://jsfiddle.net/Xeoncross/4tUDk/|294768|谢谢，Xeoncross|294769|entityMap|0|LINK|mutability|MUTABLE|url|1^0|1B|E|0|0|0|0|0|0|0|11|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|P]]|Z|$5|V|W|X|C|$Y|P]]]]

<p>I wanted to put cursor at the end of a "div" element where contenteditable = true, and I got a solution with <a href="https://jsfiddle.net/Xeoncross/4tUDk/" rel="nofollow noreferrer">Xeoncross code</a>:</p>

<pre><code>&lt;input type="button" value="Paste HTML" onclick="document.getElementById('test').focus(); pasteHtmlAtCaret('&lt;b&gt;INSERTED&lt;/b&gt;'); "&gt;

&lt;div id="test" contenteditable="true"&gt;
    Here is some nice text
&lt;/div&gt;
</code></pre>

<p>And this function do magic:</p>

<pre><code> function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt &amp;&amp; sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection &amp;&amp; document.selection.type != "Control") {
        // IE &lt; 9
        document.selection.createRange().pasteHTML(html);
    }
}
</code></pre>

<p>Works fine for most browsers, please check it, this code puts text and put focus at the end of the text in div element (not input element)</p>

<p><a href="https://jsfiddle.net/Xeoncross/4tUDk/" rel="nofollow noreferrer">https://jsfiddle.net/Xeoncross/4tUDk/</a></p>

<p>Thanks, Xeoncross</p>


blocks|key|1010239|text|虽然我回答得太晚了，但对于将来的查询，这将是有帮助的。它也可以在contenteditable+div中工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1010240|从你需要在结尾设置焦点的地方；写下这段代码-|1010241|var+el+=+document.getElementById("your_element_id");
placeCaretAtEnd(el);|code-block|syntax|javascript|1010242|函数是-|1010243|function+placeCaretAtEnd(el)+{
++++el.focus();
++++if+(typeof+window.getSelection+!=+"undefined"
++++++++++++&&+typeof+document.createRange+!=+"undefined")+{
++++++++var+range+=+document.createRange();
++++++++range.selectNodeContents(el);
++++++++range.collapse(false);
++++++++var+sel+=+window.getSelection();
++++++++sel.removeAllRanges();
++++++++sel.addRange(range);
++++}+else+if+(typeof+document.body.createTextRange+!=+"undefined")+{
++++++++var+textRange+=+document.body.createTextRange();
++++++++textRange.moveToElementText(el);
++++++++textRange.collapse(false);
++++++++textRange.select();
++++}
}|1010244|entityMap^0|W|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>Though I'm answering too late, but for future query, it will be helpful. And it also work in <code>contenteditable</code> div.</p>

<p>From where you need to set focus at end; write this code-</p>

<pre><code>var el = document.getElementById("your_element_id");
placeCaretAtEnd(el);
</code></pre>

<p>And the function is - </p>

<pre><code>function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            &amp;&amp; typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}
</code></pre>


blocks|key|3512115|text|我也面临着同样的问题。最后，这对我来说是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3512116|jQuery.fn.putCursorAtEnd+=++=+function()+{

++return+this.each(function()+{

++++//+Cache+references
++++var+$el+=+$(this),
++++++++el+=+this;

++++//+Only+focus+if+input+isn't+already
++++if+(!$el.is(":focus"))+{
+++++$el.focus();
++++}

++++//+If+this+function+exists...+(IE+9%2B)
++++if+(el.setSelectionRange)+{

++++++//+Double+the+length+because+Opera+is+inconsistent+about+whether+a+carriage+return+is+one+character+or+two.
++++++var+len+=+$el.val().length+*+2;

++++++//+Timeout+seems+to+be+required+for+Blink
++++++setTimeout(function()+{
++++++++el.setSelectionRange(len,+len);
++++++},+1);

++++}+else+{

++++++//+As+a+fallback,+replace+the+contents+with+itself
++++++//+Doesn't+work+in+Chrome,+but+Chrome+supports+setSelectionRange
++++++$el.val($el.val());

++++}

++++//+Scroll+to+the+bottom,+in+case+we're+in+a+tall+textarea
++++//+(Necessary+for+Firefox+and+Chrome)
++++this.scrollTop+=+999999;

++});

};|code-block|syntax|javascript|3512117|我们可以这样叫它：|3512118|var+searchInput+=+$("#searchInputOrTextarea");

searchInput
++.putCursorAtEnd()+//+should+be+chainable
++.on("focus",+function()+{+//+could+be+on+any+event
++++searchInput.putCursorAtEnd()
++});|3512119|它适用于safari，IE，Chrome，Mozilla。在移动设备上，我没有尝试过这个。|3512120|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I also faced same problem. Finally this gonna work for me:</p>

<pre><code>jQuery.fn.putCursorAtEnd =  = function() {

  return this.each(function() {

    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;

      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);

    } else {

      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};
</code></pre>

<p>This is how we can call this:</p>

<pre><code>var searchInput = $("#searchInputOrTextarea");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });
</code></pre>

<p>It's works for me in safari, IE, Chrome, Mozilla. On mobile devices I didn't tried this.</p>


blocks|key|294970|text|检查此解决方案！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294971|​|294972|//fn+setCurPosition
$.fn.setCurPosition+=+function(pos)+{
++++this.focus();
++++this.each(function(index,+elem)+{
++++++++if+(elem.setSelectionRange)+{
++++++++++++elem.setSelectionRange(pos,+pos);
++++++++}+else+if+(elem.createTextRange)+{
++++++++++++var+range+=+elem.createTextRange();
++++++++++++range.collapse(true);
++++++++++++range.moveEnd('character',+pos);
++++++++++++range.moveStart('character',+pos);
++++++++++++range.select();
++++++++}
++++});
++++return+this;
};

//+USAGE+-+Set+Cursor+ends
$('#str1').setCurPosition($('#str1').val().length);

//+USAGE+-+Set+Cursor+at+7+position
//+$('#str2').setCurPosition(7);|code-block|syntax|javascript|294973|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Set+cursor+at+any+position</p>
<p><input+type="text"+id="str1"+value="my+string+here"+/></p>
<p><input+type="text"+id="str2"+value="my+string+here"+/></p>|294974|294975|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<h2>Check this solution!</h2>

<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>//fn setCurPosition
$.fn.setCurPosition = function(pos) {
    this.focus();
    this.each(function(index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};

// USAGE - Set Cursor ends
$('#str1').setCurPosition($('#str1').val().length);

// USAGE - Set Cursor at 7 position
// $('#str2').setCurPosition(7);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;p&gt;Set cursor at any position&lt;/p&gt;
&lt;p&gt;&lt;input type="text" id="str1" value="my string here" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type="text" id="str2" value="my string here" /&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1010323|text|现在是2019年，上面的方法对我来说都不起作用，但这个方法起作用了，取自https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1010324|​|1010325|function+moveCursorToEnd(id)+{
++var+el+=+document.getElementById(id)+
++el.focus()
++if+(typeof+el.selectionStart+==+"number")+{
++++++el.selectionStart+=+el.selectionEnd+=+el.value.length;
++}+else+if+(typeof+el.createTextRange+!=+"undefined")+{+++++++++++
++++++var+range+=+el.createTextRange();
++++++range.collapse(false);
++++++range.select();
++}
}|code-block|syntax|javascript|1010326|<input+id="myinput"+type="text"+/>
<a+href="#"+onclick="moveCursorToEnd('myinput')">Move+cursor+to+end</a>|1010327|1010328|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/^0|10|1Z|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>It's 2019 and none of the methods above worked for me, but this one did, taken from <a href="https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/" rel="noreferrer">https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/</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>function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="myinput" type="text" /&gt;
&lt;a href="#" onclick="moveCursorToEnd('myinput')"&gt;Move cursor to end&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3512270|text|el.setSelectionRange(-1,+-1);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3512271|https://codesandbox.io/s/peaceful-bash-x2mti|3512272|3512273|此方法在一次调用中更新HTMLInputElement.selectionStart、selectionEnd和selectionDirection属性。|blockquote|3512274|3512275|3512276|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange|3512277|在其他js方法中，-1通常表示(直到)最后一个字符。这也是这种情况，但我在文档中找不到明确提到这种行为的地方。|3512278|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|T|0|0|18|0|0|0|0|0|0|0|2B|1|0|9|2|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|-4|5|6|7|16|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|17|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|G]]|Y|$5|U|V|W|E|$X|O]]]]

<p><code>el.setSelectionRange(-1, -1);</code></p>

<p><a href="https://codesandbox.io/s/peaceful-bash-x2mti" rel="noreferrer">https://codesandbox.io/s/peaceful-bash-x2mti</a></p>

<blockquote>
  <p>This method updates the HTMLInputElement.selectionStart, selectionEnd,
  and selectionDirection properties in one call.</p>
</blockquote>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange</a></p>

<p>In other js methods <code>-1</code> usually means (to the) last character. This is the case for this one too, but I couldn't find explicit mention of this behavior in the docs.</p>


blocks|key|1015082|text|超级简单(您可能必须专注于input元素)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015083|inputEl+=+getElementById('inputId');
var+temp+=+inputEl.value;
inputEl.value+=+'';
inputEl.value+=+temp;|code-block|syntax|javascript|1015084|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|$]]

<p>Super easy (you may have to focus on the input element)</p>

<pre class="lang-js prettyprint-override"><code>inputEl = getElementById('inputId');
var temp = inputEl.value;
inputEl.value = '';
inputEl.value = temp;
</code></pre>


blocks|key|1015089|text|试试这个和Vanilla+JavaScript一起使用吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015090|<input+type="text"+id="yourId"+onfocus="+let+value+=+this.value;+this.value+=+null;+this.value=value"+name="nameYouWant"+class="yourClass"+value="yourValue"+placeholder="yourPlaceholder...">|code-block|syntax|javascript|1015091|在Js中|1015092|document.getElementById("yourId").focus()|1015093|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Try this one works with Vanilla JavaScript. </p>

<pre class="lang-html prettyprint-override"><code>&lt;input type="text" id="yourId" onfocus=" let value = this.value; this.value = null; this.value=value" name="nameYouWant" class="yourClass" value="yourValue" placeholder="yourPlaceholder..."&gt;
</code></pre>

<p>In Js</p>

<pre><code>document.getElementById("yourId").focus()
</code></pre>


blocks|key|3512331|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3512332|document.querySelector('input').addEventListener('focus',+e+=>+{
++const+{+value+}+=+e.target;
++e.target.setSelectionRange(value.length,+value.length);
});|code-block|syntax|javascript|3512333|<input+value="my+text"+/>|3512334|3512335|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="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('input').addEventListener('focus', e =&gt; {
  const { value } = e.target;
  e.target.setSelectionRange(value.length, value.length);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input value="my text" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1015101|text|const+end+=+input.value.length

input.setSelectionRange(end,+end)
//++scroll+to+the+bottom+if+a+textarea+has+long+text
input.focus()|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1015102|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 class="lang-js prettyprint-override"><code>const end = input.value.length

input.setSelectionRange(end, end)
//  scroll to the bottom if a textarea has long text
input.focus()
</code></pre>


<p>What is the best way (and I presume simplest way) to place the cursor at the end of the text in a input text element via JavaScript - after focus has been set to the element?</p>


Use JavaScript to place cursor at end of text in text input element

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

在将焦点设置到元素之后，通过JavaScript将光标放在输入文本元素的文本末尾，最好的方法(我认为是最简单的方法)是什么？

问使用JavaScript将光标放在文本输入元素中的文本末尾
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript将光标放在文本输入元素中的文本末尾EN