jQuery Set Cursor Position in Text Area

前端 未结 16 1476
无人共我
无人共我 2020-11-21 11:42

How do you set the cursor position in a text field using jQuery? I\'ve got a text field with content, and I want the users cursor to be positioned at a certain offset when

相关标签:
16条回答
  • 2020-11-21 12:02

    Here's a jQuery solution:

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

    With this, you can do

    $('#elem').selectRange(3,5); // select a range of text
    $('#elem').selectRange(3); // set cursor position
    
    • JsFiddle
    • JsBin
    0 讨论(0)
  • 2020-11-21 12:02

    Based on this question, the answer will not work perfectly for ie and opera when there is new line in the textarea. The answer explain how to adjust the selectionStart, selectionEnd before calling setSelectionRange.

    I have try the adjustOffset from the other question with the solution proposed by @AVProgrammer and it work.

    function adjustOffset(el, offset) {
        /* From https://stackoverflow.com/a/8928945/611741 */
        var val = el.value, newOffset = offset;
        if (val.indexOf("\r\n") > -1) {
            var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/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);
    }
    
    0 讨论(0)
  • 2020-11-21 12:03

    Set the focus before you have inserted the text into the textarea thus?

    $("#comments").focus();
    $("#comments").val(comments);
    
    0 讨论(0)
  • 2020-11-21 12:04

    Small modification to the code I found in bitbucket

    Code is now able to select/highlight with start/end points if given 2 positions. Tested and works fine in FF/Chrome/IE9/Opera.

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

    The code is listed below, only a few lines changed:

    (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)
    
    0 讨论(0)
  • 2020-11-21 12:05

    This works for me in chrome

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

    Apparently you need a delay of a microsecond or more, because usually a user focusses on the text field by clicking at some position in the text field (or by hitting tab) which you want to override, so you have to wait till the position is set by the user click and then change it.

    0 讨论(0)
  • 2020-11-21 12:06

    In IE to move cursor on some position this code is enough:

    var range = elt.createTextRange();
    range.move('character', pos);
    range.select();
    
    0 讨论(0)
提交回复
热议问题