jQuery在文本区域中设置光标位置

Question

如何使用jQuery在文本字段中设置光标位置？我有一个带有内容的文本字段，我希望用户将光标放在该字段上时将光标定位在某个偏移处。该代码应该看起来像这样：

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

该setCursorPosition函数的实现是什么样的？如果您的文本字段的内容为abcdefg，则此调用将导致光标的定位如下：abcd |
efg。

Java具有类似的功能setCaretPosition。javascript是否存在类似的方法？

更新：我修改了CMS的代码以与jQuery配合使用，如下所示：

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

Answer 1

我有两个功能：

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

然后，您可以像这样使用setCaretToPos：

setCaretToPos(document.getElementById("YOURINPUT"), 4);

带有a textarea和an的实时示例input，显示了jQuery的用法：

function setSelectionRange(input, selectionStart, selectionEnd) {

  if (input.setSelectionRange) {

    input.focus();

    input.setSelectionRange(selectionStart, selectionEnd);

  } else if (input.createTextRange) {

    var range = input.createTextRange();

    range.collapse(true);

    range.moveEnd('character', selectionEnd);

    range.moveStart('character', selectionStart);

    range.select();

  }

}



function setCaretToPos(input, pos) {

  setSelectionRange(input, pos, pos);

}



$("#set-textarea").click(function() {

  setCaretToPos($("#the-textarea")[0], 10)

});

$("#set-input").click(function() {

  setCaretToPos($("#the-input")[0], 10);

});


<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

<br><input type="button" id="set-textarea" value="Set in textarea">

<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">

<br><input type="button" id="set-input" value="Set in input">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

截至2016年，测试并在Chrome，火狐，IE11，甚至IE8的工作（见去年在这里
;栈片断不支持IE8）。