blocks|key|1303427|text|看起来像是在聚焦后清除该值，然后重置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303428|input.focus();
var+tmpStr+=+input.val();
input.val('');
input.val(tmpStr);|code-block|syntax|javascript|1303429|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|$]]

Looks like clearing the value after focusing and then resetting works.

<pre><code>input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
</code></pre>

blocks|key|1518337|text|这看起来有点奇怪，甚至有点愚蠢，但这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518338|input.val(lastQuery);
input.focus().val(input.val());|code-block|syntax|javascript|1518339|现在，我不确定我是否复制了你的设置。我假设input是一个<input>元素。|offset|length|style|CODE|1518340|通过重新设置值(设置为自身)，我认为光标将被放在输入的末尾。在Firefox3和MSIE7上测试过。|1518341|entityMap^0|0|0|L|5|T|7|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|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

It looks a little odd, even silly, but this is working for me:

<pre><code>input.val(lastQuery);
input.focus().val(input.val());
</code></pre>

Now, I'm not certain I've replicated your setup. I'm assuming <code>input</code> is an <code>&lt;input&gt;</code> element.

By re-setting the value (to itself) I think the cursor is getting put at the end of the input. Tested in Firefox 3 and MSIE7.

blocks|key|1303620|text|希望这能对你有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303621|var+fieldInput+=+$('#fieldName');
var+fldLength=+fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength,+fldLength);|code-block|syntax|javascript|1303622|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|$]]

Hope this help you:

<pre><code>var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);
</code></pre>

blocks|key|1303581|text|Chris+Coyier有一个非常好用的迷你jQuery插件：http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1303582|如果支持，它将使用setSelectionRange，否则将有可靠的后备。|1303583|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;
++});
};|code-block|syntax|javascript|1303584|然后你可以这样做：|1303585|input.putCursorAtEnd();|1303586|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/|1|https://developer.mozilla.org/en-US/docs/Web/API/Input.setSelectionRange^0|V|26|0|0|9|H|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

Chris Coyier has a mini jQuery plugin for this which works perfectly well: <a href="http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/">http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/</a>

It uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Input.setSelectionRange">setSelectionRange</a> if supported, else has a solid fallback.

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

Then you can just do:

<pre><code>input.putCursorAtEnd();
</code></pre>

blocks|key|1303709|text|在一行代码中..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303710|$('#txtSample').focus().val($('#txtSample').val());|code-block|syntax|javascript|1303711|这条线路很适合我。|1303712|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|$]]

What about in one single line...

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

This line works for me.

blocks|key|1518275|text|对于不同的浏览器，它会有所不同：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518276|这在ff中有效：|1518277|++++var+t+=$("#INPUT");
++++var+l=$("#INPUT").val().length;
++++$(t).focus();

++++var+r+=+$("#INPUT").get(0).createTextRange();
++++r.moveStart("character",+l);+
++++r.moveEnd("character",+l);++++++
++++r.select();|code-block|syntax|javascript|1518278|在SitePoint，AspAlliance上的这些文章中有更多详细信息。|offset|length|1518279|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/article/life-autocomplete-textboxes/2/|1|http://aspalliance.com/1109^0|0|0|0|1|9|0|B|B|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

It will be different for different browsers:

This works in ff:

<pre><code> var t =$("#INPUT");
 var l=$("#INPUT").val().length;
 $(t).focus();

 var r = $("#INPUT").get(0).createTextRange();
 r.moveStart("character", l); 
 r.moveEnd("character", l); 
 r.select();
</code></pre>

More details are in these articles here at <a href="http://www.sitepoint.com/article/life-autocomplete-textboxes/2/" rel="noreferrer">SitePoint</a>, <a href="http://aspalliance.com/1109" rel="noreferrer">AspAlliance</a>.

blocks|key|1518373|text|我知道这个答案来得太晚了，但我能看到人们还没有找到答案。为了防止up键将光标放在开始位置，只需从处理事件的方法执行return+false即可。这会停止导致光标移动的事件链。从下面的操作中粘贴修改后的代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1518374|$(document).keydown(function(e)+{
++var+key+++=+e.charCode+?+e.charCode+:+e.keyCode+?+e.keyCode+:+0;
++var+input+=+self.shell.find('input.current:last');

++switch(key)+{
++++case+38:+//+up
++++++lastQuery+=+self.queries[self.historyCounter-1];
++++++self.historyCounter--;
++++++input.val(lastQuery).focus();
++++++//+HERE+IS+THE+FIX:
++++++return+false;+
//+and+it+continues+on+from+there|code-block|syntax|javascript|1518375|entityMap^0|1L|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I know this answer comes late, but I can see people havent found an answer. To prevent the up key to put the cursor at the start, just <code>return false</code> from the method handling the event. This stops the event chain that leads to the cursor movement. Pasting revised code from the OP below:

<pre><code>$(document).keydown(function(e) {
 var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
 var input = self.shell.find('input.current:last');

 switch(key) {
 case 38: // up
 lastQuery = self.queries[self.historyCounter-1];
 self.historyCounter--;
 input.val(lastQuery).focus();
 // HERE IS THE FIX:
 return false; 
// and it continues on from there
</code></pre>

blocks|key|1303386|text|我使用下面的代码，它运行良好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303387|function+to_end(el)+{
++++++++++++var+len+=+el.value.length+%7C%7C+0;
++++++++++++if+(len)+{
++++++++++++++++if+('setSelectionRange'+in+el)+el.setSelectionRange(len,+len);
++++++++++++++++else+if+('createTextRange'+in+el)+{//+for+IE
++++++++++++++++++++var+range+=+el.createTextRange();
++++++++++++++++++++range.moveStart('character',+len);
++++++++++++++++++++range.select();
++++++++++++++++}
++++++++++++}
++++++++}|code-block|syntax|javascript|1303388|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|$]]

I use code below and it works fine

<pre><code>function to_end(el) {
 var len = el.value.length || 0;
 if (len) {
 if ('setSelectionRange' in el) el.setSelectionRange(len, len);
 else if ('createTextRange' in el) {// for IE
 var range = el.createTextRange();
 range.moveStart('character', len);
 range.select();
 }
 }
 }
</code></pre>

blocks|key|1303663|text|就像其他人说的那样，clear和fill对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303664|++++var+elem+=+$('#input_field');
++++var+val+=+elem.val();
++++elem.focus().val('').val(val);|code-block|syntax|javascript|1303665|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|$]]

like other said, clear and fill worked for me:

<pre><code> var elem = $('#input_field');
 var val = elem.val();
 elem.focus().val('').val(val);
</code></pre>

blocks|key|1518812|text|首先设置该值。然后设置焦点。当它聚焦时，它将使用在聚焦时存在的值，因此必须首先设置您的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1518813|对于使用单击的<button>的值填充<input>的应用程序，此逻辑适用于我。首先设置val()。然后是focus()|offset|length|style|CODE|1518814|$('button').on('click','',function(){
++++var+value+=+$(this).attr('value');
++++$('input[name=item1]').val(value);
++++$('input[name=item1]').focus();
});|code-block|syntax|javascript|1518815|entityMap^0|0|7|8|J|7|18|5|1H|7|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]|$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|N|$]]

set the value first. then set the focus. when it focuses, it will use the value that exists at the time of focus, so your value must be set first.

this logic works for me with an application that populates an <code>&lt;input&gt;</code> with the value of a clicked <code>&lt;button&gt;</code>. <code>val()</code> is set first. then <code>focus()</code>

<pre><code>$('button').on('click','',function(){
 var value = $(this).attr('value');
 $('input[name=item1]').val(value);
 $('input[name=item1]').focus();
});
</code></pre>

blocks|key|1303475|text|我发现了上面几个人提出的相同的东西。如果你先focus()，然后将val()推入输入端，在火狐、Chrome和IE浏览器中，光标将定位到输入值的末尾。如果你先将val()推入输入栏，火狐和Chrome会将光标放在输入栏的末尾，但当你使用focus()时，IE会将光标放在最前面。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1303476|$('element_identifier').focus().val('some_value')+|code-block|syntax|javascript|1303477|应该可以做到这一点(对我来说总是如此)。|1303478|entityMap^0|M|7|X|5|28|5|3A|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$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|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

I have found the same thing as suggested above by a few folks. If you <code>focus()</code> first, then push the <code>val()</code> into the input, the cursor will get positioned to the end of the input value in Firefox,Chrome and IE. If you push the <code>val()</code> into the input field first, Firefox and Chrome position the cursor at the end, but IE positions it to the front when you <code>focus()</code>.

<pre><code>$('element_identifier').focus().val('some_value') 
</code></pre>

should do the trick (it always has for me anyway).

blocks|key|1303565|text|首先，您必须在选定的textbox对象上设置焦点，然后设置该值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303566|$('#inputID').focus();
$('#inputID').val('someValue')|code-block|syntax|javascript|1303567|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|$]]

At the first you have to set focus on selected textbox object and next you set the value.

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

blocks|key|1303755|text|++++function+focusCampo(id){
++++++++var+inputField+=+document.getElementById(id);
++++++++if+(inputField+!=+null+&&+inputField.value.length+!=+0){
++++++++++++if+(inputField.createTextRange){
++++++++++++++++var+FieldRange+=+inputField.createTextRange();
++++++++++++++++FieldRange.moveStart('character',inputField.value.length);
++++++++++++++++FieldRange.collapse();
++++++++++++++++FieldRange.select();
++++++++++++}else+if+(inputField.selectionStart+%7C%7C+inputField.selectionStart+==+'0')+{
++++++++++++++++var+elemLen+=+inputField.value.length;
++++++++++++++++inputField.selectionStart+=+elemLen;
++++++++++++++++inputField.selectionEnd+=+elemLen;
++++++++++++++++inputField.focus();
++++++++++++}
++++++++}else{
++++++++++++inputField.focus();
++++++++}
++++}

$('#urlCompany').focus(focusCampo('urlCompany'));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1303756|适用于所有ie浏览器..|unstyled|1303757|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> function focusCampo(id){
 var inputField = document.getElementById(id);
 if (inputField != null &amp;&amp; inputField.value.length != 0){
 if (inputField.createTextRange){
 var FieldRange = inputField.createTextRange();
 FieldRange.moveStart('character',inputField.value.length);
 FieldRange.collapse();
 FieldRange.select();
 }else if (inputField.selectionStart || inputField.selectionStart == '0') {
 var elemLen = inputField.value.length;
 inputField.selectionStart = elemLen;
 inputField.selectionEnd = elemLen;
 inputField.focus();
 }
 }else{
 inputField.focus();
 }
 }

$('#urlCompany').focus(focusCampo('urlCompany'));
</code></pre>

works for all ie browsers..

blocks|key|1303904|text|这是另一个，没有重新赋值的one+liner：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303905|$("#inp").focus()[0].setSelectionRange(99999,+99999);|code-block|syntax|javascript|1303906|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|$]]

Here is another one, a one liner which does not reassign the value:

<pre><code>$("#inp").focus()[0].setSelectionRange(99999, 99999);
</code></pre>

blocks|key|1518494|text|function+CurFocus()
{
++++$('.txtEmail').focus();+
}

function+pageLoad()
{
+++setTimeout(CurFocus(),3000);
}

window.onload+=+pageLoad;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1518495|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 CurFocus()
{
 $('.txtEmail').focus(); 
}

function pageLoad()
{
 setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;
</code></pre>

blocks|key|1303524|text|scorpion9给出的答案是可行的。为了更清楚起见，请看下面的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1303525|<script+src="~/js/jquery.js"></script>+
<script+type="text/javascript">
++++$(function+()+{
++++++++var+input+=+$("#SomeId");
++++++++input.focus();
++++++++var+tmpStr+=+input.val();
++++++++input.val('');
++++++++input.val(tmpStr);
++++});
</script>|code-block|syntax|javascript|1303526|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|$]]

The answer from scorpion9 works. Just to make it more clear see my code below,

<pre><code>&lt;script src="~/js/jquery.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt;
 $(function () {
 var input = $("#SomeId");
 input.focus();
 var tmpStr = input.val();
 input.val('');
 input.val(tmpStr);
 });
&lt;/script&gt;
</code></pre>

This question has been asked in a few different formats but I can't get any of the answers to work in my scenario.

I am using jQuery to implement command history when user hits up/down arrows. When up arrow is hit, I replace the input value with previous command and set focus on the input field, but want the cursor always to be positioned at the end of the input string.

My code, as is:

<pre><code>$(document).keydown(function(e) {
 var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
 var input = self.shell.find('input.current:last');

 switch(key) {
 case 38: // up
 lastQuery = self.queries[self.historyCounter-1];
 self.historyCounter--;
 input.val(lastQuery).focus();
// and it continues on from there
</code></pre>

How can I force the cursor to be placed at the end of 'input' after focus?

Set mouse focus and move cursor to end of input using jQuery

jQuery

这个问题已经被问了几种不同的格式，但我无法在我的场景中得到任何答案。当用户点击向上/向下箭头时，我使用jQuery实现命令历史记录。当点击向上箭头时，我将输入值替换为上一个命令，并将焦点设置在输入字段上，但希望光标始终位于输入字符串的末尾。我的代码如下：$(document).keydown(function(e) {  var key   = e.charCode ? e.charCode : 

问使用jQuery设置鼠标焦点并将光标移动到输入的末尾
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery设置鼠标焦点并将光标移动到输入的末尾EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery设置鼠标焦点并将光标移动到输入的末尾
EN