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


95

已经以几种不同的格式提出了这个问题,但是在我的情况下我无法获得任何答案。

当用户按下向上/向下箭头时,我正在使用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

如何在聚焦后将光标置于“输入”的末尾?

Answers:


145

看起来像是在聚焦后清除值,然后进行重置。

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

4
这是我能够跨浏览器找到的唯一解决方案。恭喜您!
Meshaal

2
这在FF和chrome上可以正常使用,但在IE中不行。有人知道如何在IE中解决此问题吗?
约翰·史密斯

1
另请注意,您可以将呼叫链接:var temp = input.focus().val(); input.val('').val(temp);
harpo 2014年

20
这可以变得更简单:input.focus().val(input.val());
Fateh Khalsa,2014年

2
似乎contenteditable由于某种原因无法使用元素,也许是因为必须使用.html()而不是.val()
jg2703

55

看起来有点奇怪,甚至很傻,但这对我有用:

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

现在,我不确定是否已复制您的设置。我假设input是一个<input>元素。

通过重新设置值(本身),我认为光标被放置在输入的末尾。在Firefox 3和MSIE7中测试。


1
是的,输入是一个<input>元素。我尝试过,但在FF3或Safari 4中
不起作用

这事有进一步更新吗?为我工作。如果找到解决方案,请更新问题或添加答案。
artlung

在FF15中,将光标设置为输入字段的开始。除此之外,它的工作状况还不错。您是否也有针对FF的解决方案?
JochenJung 2012年

@JochenJung自2009年以来我就再也没有看过-当时它与FF3和jQuery一起工作。如果您提出使用当前jQuery和FF15的解决方案,请随时编辑此文章。
artlung 2012年

45

希望这对您有帮助:

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

4
效果很好,我认为这是比重置值更好的解决方案,尤其是当存在某种模型视图绑定时。
morten.c

2
这是正确的答案,可以准确地设置要设置的内容,而不会混淆。
丹·巴伦

14

克里斯·科耶尔(Chris Coyier)为此提供了一个迷你jQuery插件,效果很好:http : //css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

如果支持,它将使用setSelectionRange,否则具有可靠的后备。

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

然后,您可以执行以下操作:

input.putCursorAtEnd();

令人惊讶的是,我发现的唯一解决方案是到2020年才能可靠运行。
亚当琼斯


8

2 artlung的答案:它仅在我的代码(IE7,IE8; Jquery v1.6)中与第二行一起使用:

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

另外:如果使用JQuery将输入元素添加到DOM,则不会在IE中设置焦点。我使用了一些技巧:

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

1
这种方法对我有用,但是我必须做些类似的事情:var input = $(“#inputID”); tmp = input.val(); input.focus()。val(“”)。blur()。focus()。val(tmp);
will824 2013年

@ will824您的评论解决方案对我有用。我将其发布为答案。
阿米尔沙赫扎德

8

参考:@ will824注释,此解决方案为我工作,没有兼容性问题。其余解决方案在IE9中失败。

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

经过测试,发现可以在以下环境中工作:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

6

我知道这个答案来晚了,但我可以看到人们还没有找到答案。为了防止使用向上键将光标放在开始位置,仅从return false处理事件的方法开始即可。这将停止导致光标移动的事件链。从以下OP粘贴修订后的代码:

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

1
您可以将第二行减少为var key = e.charCode || e.keyCode || 0;
Gone Coding

6

我在下面使用代码,效果很好

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

6

不同的浏览器会有所不同:

这适用于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();

更多详细信息,这些文章在这里SitePointAspAlliance


4

就像其他人说的那样,清除和填充对我有用:

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

3

首先设置值。然后设置焦点。当它聚焦时,它将使用聚焦时存在的值,因此必须首先设置您的值。

这种逻辑对我有用的应用程序可以用click <input>的值填充<button>val()首先设置。然后focus()

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

您可以简化一行而不是两行:$('input[name=item1]').val(value).focus();
inMILD

2

我发现了与少数人建议的相同的东西。如果focus()先使用,然后按val()到输入中,则光标将在Firefox,Chrome和IE中定位到输入值的末尾。如果您val()先将插入到输入字段中,则Firefox和Chrome 会将光标置于末尾,而IE则是将IE置于其末尾focus()

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

应该可以解决问题(无论如何,这对我来说总是如此)。


2

首先,您必须将焦点放在选定的文本框对象上,然后设置值。

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

1
我试过了,但是没有用。如果将div内容的editable设置为true,它也对您有用吗?
Rupam Datta 2013年

1
    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'));

适用于所有浏览器。


1

这是另一个,一个不重新分配值的班轮:

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

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

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

window.onload = pageLoad;

0

scorpion9的答案有效。为了更清楚一点,请参见下面的代码,

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.