使用jQuery在输入文本中设置光标答案

【问题标题】：Set cursor within text of input using jQuery使用jQuery在输入文本中设置光标
【发布时间】：2014-11-06 07:10:08
【问题描述】：

使用这个主题： jQuery Set Cursor Position in Text Area

我写了这段代码，但它不起作用：

<input id="myTextInput" type="text" value="some text2">
<input type="button" value="set mouse" id="btn" />

和：

$(document).ready(function () {
    $('#btn').on('click', function () {
        var inp = $('#myTextInput');        
        var pos = 3;
        inp.focus();
        if (inp.setSelectionRange) {
            inp.setSelectionRange(pos, pos);
        } else if (inp.createTextRange) {
            var range = inp.createTextRange();
            range.collapse(true);
            if (pos < 0) {
                pos = $(this).val().length + pos;
            }
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
});

DEMO

我的错误在哪里？谢谢

【问题讨论】：

正确的搜索词是caret

标签： javascript jquery html input-field

【解决方案1】：

您的错误是您选择了 jQuery 对象而不是 DOM 元素：将 var inp = $('#myTextInput'); 替换为 var inp = $('#myTextInput')[0];。

JSFIDDLE

但是，我建议使用来自this answer 的插件，因为代码看起来更简洁：

$.fn.selectRange = function(start, end) {
  return this.each(function() {
    if (this.setSelectionRange) {
      this.focus();
      this.setSelectionRange(start, end);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', end);
      range.moveStart('character', start);
      range.select();
    }
  });
};


$(document).ready(function() {
  $('#btn').on('click', function() {
    var pos = 7;
    $('#myTextInput').focus().selectRange(pos, pos);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myTextInput" type="text" value="some text2">
<input type="button" value="set mouse" id="btn" />

【讨论】：

【解决方案2】：

您需要 DOM 元素而不是 JQuery 对象才能使用 setSelectionRange 或 createTextRange。使用.get(0) 检索它。

var inp = $('#myTextInput');
inp.focus();
inp = inp.get(0);

http://jsfiddle.net/qeanb8gk/1/

【讨论】：