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

Question

已经以几种不同的格式提出了这个问题，但我无法在我的场景中得到任何答案。

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

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

score 152 · Accepted Answer

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

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

score 56 · Accepted Answer

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

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

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

通过重新设置值（自身），我认为光标被放在输入的末尾。在 Firefox 3 和 MSIE7 中测试。

score 48 · Accepted Answer

希望这对您有所帮助：

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

score 14 · Accepted Answer

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

score 12 · Accepted Answer

12

单行怎么办...

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

这条线对我有用。

于 2014-11-05T16:13:00.717 回答

score 10 · Accepted Answer

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

score 8 · Accepted Answer

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

score 6 · Accepted Answer

我知道这个答案来晚了，但我可以看到人们还没有找到答案。为了防止向上键将光标放在开始处，只需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

score 6 · Accepted Answer

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

这适用于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的这些文章中。

score 6 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

先设置值。然后设置焦点。当它聚焦时，它会使用聚焦时存在的值，所以必须先设置你的值。

此逻辑适用于我的应用程序，该应用程序<input>使用 clicked 的值填充 an <button>。val()是首先设置的。然后focus()

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

我发现了与上面一些人建议的相同的事情。如果您focus()先将推val()入输入，则光标将定位到 Firefox、Chrome 和 IE 中输入值的末尾。如果您先将推val()入输入字段，Firefox 和 Chrome 会将光标定位在末尾，但 IE 会将光标定位到最前面focus()。

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

应该做的伎俩（无论如何它总是对我有用）。

score 1 · Accepted Answer

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

适用于所有ie浏览器..

score 1 · Accepted Answer

这是另一个，一个不重新分配值的单行：

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

score 0 · Accepted Answer

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

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

window.onload = pageLoad;

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

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

将输入前一个值存储在变量中 -> 空输入值 -> 焦点输入 -> 重新分配原始值 SIMPLE ！

score -4 · Accepted Answer

-4

它将用鼠标点聚焦

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

于 2019-11-19T06:29:27.073 回答

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

20 回答 20

Related

Reference