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

这个问题已经以几种不同的形式提出,但是我不能得到任何一个答案在我的场景中起作用。

我使用 jQuery 来实现用户点击上/下箭头时的命令历史。当点击向上箭头时,我用前面的命令替换输入值,并将焦点设置在输入字段上,但希望光标始终定位在输入字符串的末尾。

我的代码是:

$(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

我怎样才能迫使光标放在’输入’结束后的焦点?

169266 次浏览

It will be different for different browsers:

This works in ff:

    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();

More details are in these articles here at SitePoint, AspAlliance.

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

input.val(lastQuery);
input.focus().val(input.val());

Now, I'm not certain I've replicated your setup. I'm assuming input is an <input> 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.

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 return false from the method handling the event. This stops the event chain that leads to the cursor movement. Pasting revised code from the OP below:

$(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

I use code below and it works fine

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();
}
}
}

2 artlung's answer: It works with second line only in my code (IE7, IE8; Jquery v1.6):

var input = $('#some_elem');
input.focus().val(input.val());

Addition: if input element was added to DOM using JQuery, a focus is not set in IE. I used a little trick:

input.blur().focus().val(input.val());

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

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

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

$('element_identifier').focus().val('some_value')

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

function CurFocus()
{
$('.txtEmail').focus();
}


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


window.onload = pageLoad;

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

<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>

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

$('#inputID').focus();
$('#inputID').val('someValue')

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

It uses setSelectionRange if supported, else has a solid fallback.

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;
});
};

Then you can just do:

input.putCursorAtEnd();

Hope this help you:

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

like other said, clear and fill worked for me:

    var elem = $('#input_field');
var val = elem.val();
elem.focus().val('').val(val);

Ref: @will824 Comment, This solution worked for me with no compatibility issues. Rest of solutions failed in IE9.

var input = $("#inputID");
var tmp = input.val();
input.focus().val("").blur().focus().val(tmp);

Tested and found working in:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

What about in one single line...

$('#txtSample').focus().val($('#txtSample').val());

This line works for me.

    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 || inputField.selectionStart == '0') {
var elemLen = inputField.value.length;
inputField.selectionStart = elemLen;
inputField.selectionEnd = elemLen;
inputField.focus();
}
}else{
inputField.focus();
}
}


$('#urlCompany').focus(focusCampo('urlCompany'));

works for all ie browsers..

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 <input> with the value of a clicked <button>. val() is set first. then focus()

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

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

$("#inp").focus()[0].setSelectionRange(99999, 99999);

It will focus with mouse point

$("#TextBox").focus();

  var prevInputVal = $('#input_id').val();
$('#input_id').val('').focus().val(prevInputVal)

Store input previous value in a variable -> empty input value -> focus input -> reassign original value SIMPLE !