关于javascript：jQuery在文本区域中设置光标位置


jQuery Set Cursor Position in Text Area

如何使用jquery在文本字段中设置光标位置？我有一个包含内容的文本字段，我希望当用户关注该字段时，光标被定位在某个偏移位置。代码应该是这样的：

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

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

Java有一个类似的函数，StestCaltPosit。对于javascript是否存在类似的方法？

更新：我修改了CMS的代码以使用jquery，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);

号

相关讨论

以下是jquery解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            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();
        }
    });
};

有了这个，你可以

1
2
$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

。

  • J小提琴
  • 杰斯宾
相关讨论

我有两个功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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：

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

号

带有textarea和input的实况示例，显示jquery的用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
});
1
2
3
4
5
<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>
<input type="button" id="set-textarea" value="Set in textarea">
<input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<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">

。

截至2016年，在Chrome、Firefox、IE11甚至IE8上进行了测试和工作(见最后一页；堆栈片段不支持IE8)。

相关讨论

这里的解决方案是正确的，除了jquery扩展代码。

扩展函数应该迭代每个选定的元素，并返回this以支持链接。以下是正确版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

。

相关讨论

我找到了一个适合我的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    input = this[0];

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

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

。

现在，您可以通过调用以下命令将焦点移动到任何元素的末尾：

1
$(element).focusEnd();

号

相关讨论

这对我在Mac OSX上的Safari 5、jQuery 1.4很有用：

1
2
$("Selector")[elementIx].selectionStart = desiredStartPos;
$("Selector")[elementIx].selectionEnd = desiredEndPos;

我确实意识到这是一篇非常古老的文章，但是我认为我应该提供一个更简单的解决方案，只使用jquery来更新它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getTextCursorPosition(ele) {  
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"
",secondSlice].join('');

    return new_text;
}

号

使用ctrl-enter添加新行的用法(如在Facebook中)：

1
2
3
4
5
6
7
8
9
10
11
12
13
$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

号

我乐于接受批评。谢谢您。

更新：此解决方案不允许正常的复制和粘贴功能(即，ctrl-c、ctrl-v)工作，因此将来我必须编辑此功能以确保零件再次工作。如果你有一个如何做的想法，请在这里评论，我将很高兴测试出来。谢谢。

我使用的是：http://plugins.jquery.com/project/jcaret

相关讨论

因此，在将文本插入文本区域之前设置焦点？

1
2
$("#comments").focus();
$("#comments").val(comments);

号

相关讨论

在IE中，将光标移动到某个位置就足够了：

1
2
3
var range = elt.createTextRange();
range.move('character', pos);
range.select();

。

这个适合我穿铬合金的

1
2
3
4
5
6
$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});

号

显然，您需要延迟一微秒或更长的时间，因为通常用户通过单击要覆盖的文本字段中的某个位置(或通过单击选项卡)来聚焦文本字段，因此您必须等待用户单击设置位置，然后更改它。

相关讨论

对我在BitBucket中找到的代码进行了小修改

如果给定2个位置，代码现在可以选择/突出显示起点/终点。在FF/Chrome/IE9/Opera中测试并运行良好。

1
$('#field').caret(1, 9);

号

代码如下所示，只更改了几行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return '0';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos_end);
      range.moveStart('character', pos_start);
      range.select();
    }
  }
})(jQuery)

号

相关讨论

基于这个问题，当文本区域中有新行时，对于IE和Opera来说，答案并不完美。答案解释了如何在调用SetSelectionRange之前调整SelectionStart、SelectionAnd。

我试过用@avprogrammer提出的解决方案对另一个问题进行调整，它工作正常。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function adjustOffset(el, offset) {
    /* From https://stackoverflow.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("

") > -1) {
        var matches = val.replace(/

/g,"
").slice(0, offset).match(/
/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://stackoverflow.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://stackoverflow.com/a/7180862/611741
       modified to fit https://stackoverflow.com/a/8928945/611741 */
    if(this.lengh == 0) return this;
    input = this[0];

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

    return this;
}

$.fn.focusEnd = function(){
    /* From https://stackoverflow.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

号

如果使用箭头键，请记住在函数调用后立即返回false，因为chrome会将frack弄脏。

1
2
3
4
{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}
相关讨论

我必须为ContentEditableElements和jQuery进行此项工作，并且让某人希望它可以随时使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$.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)建立offset并设置focus on element。

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

最佳；D

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(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);

号

J小提琴链接