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

如何在焦点后强制光标放在"输入"的末尾？

1> 小智..：

---

看起来像聚焦后清除值然后重置工作.

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

---

这可以变得更简单:`input.focus().val(input.val());`

---

这是我能够找到的跨浏览器的唯一解决方案.感谢你!

---

这适用于FF和chrome,但不适用于IE ..任何人都知道如何在IE中解决这个问题？

2> artlung..：

---

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

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

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

通过重新设置值(对自己)我认为光标放在输入的末尾.在Firefox 3和MSIE7中测试过.

3> harsh4u..：

---

希望这能帮到你:

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

---

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

---

这是正确的答案，无需设置即可准确设置您想要的设置。

4> jackocnr..：

---

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

5> Chris Rosete..：

---

在一条线上怎么样......

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

这条线适合我.

6> SergO..：

---

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

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

另外:如果使用JQuery将input元素添加到DOM,则不会在IE中设置焦点.我用了一个小技巧:

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

7> Aamir Shahza..：

---

参考:@ 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

8> pederOverlan..：

---

我知道这个答案来得很晚,但我可以看到人们没有找到答案.要防止up键将光标放在开头,只需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

9> Tomas..：

---

我使用下面的代码,它工作正常

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

10> TheVillageId..：

---

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

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

更多详细信息,请参见SitePoint,AspAlliance的这些文章.