jQuery设置文本区域的光标位置

如何使用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);

当前回答

如果setSelectionRange不存在，您可以直接更改原型。

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

js小提琴链接

2011-10-17 07:44:50

其他回答

我正在使用这个:http://plugins.jquery.com/project/jCaret

2010-01-18 20:20:29

只要记住在函数调用后返回false，如果你使用方向键，因为Chrome fricks frack否则。

{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}

2011-03-08 01:41:34

如果setSelectionRange不存在，您可以直接更改原型。

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

js小提琴链接

2011-10-17 07:44:50

我必须让它为可满足的元素和jQuery工作，并认为有人可能想要它准备好使用:

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return this;
};

使用$(selector). getcaret()返回数字偏移量，$(selector). setcaret (num)建立偏移量并将焦点设置在元素上。

还有一个小提示，如果你从控制台运行$(selector). setcaret (num)，它将返回console.log，但你不会看到焦点，因为它是在控制台窗口建立的。

D最好成绩;

2017-04-03 15:54:29

我有两个功能:

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

活生生的例子与文本区域和输入，显示使用jQuery:

截至2016年，我在Chrome, Firefox, IE11，甚至IE8上进行了测试和工作。堆栈片段不支持IE8)。

2009-01-31 16:56:36

jQuery设置文本区域的光标位置

推荐文章

最新文章

标签