jQuery Đặt vị trí con trỏ trong vùng văn bản

Làm cách nào để bạn đặt vị trí con trỏ trong trường văn bản bằng jQuery? Tôi đã có một trường văn bản có nội dung và tôi muốn con trỏ người dùng được định vị ở một độ lệch nhất định khi họ tập trung vào trường. Mã sẽ trông giống như thế này:

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

Việc triển khai hàm setC bổngPocation đó sẽ như thế nào? Nếu bạn có một trường văn bản với nội dung abcdefg, cuộc gọi này sẽ dẫn đến việc con trỏ được định vị như sau: abcd ** | ** efg.

Java có chức năng tương tự, setCaretPocation. Có một phương pháp tương tự tồn tại cho javascript?

Cập nhật: Tôi đã sửa đổi mã CMS để hoạt động với jQuery như sau:

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

Tôi có hai chức năng:

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

Sau đó, bạn có thể sử dụng setCaretToPos như thế này:

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

Ví dụ trực tiếp với cả a textareavà an input, hiển thị việc sử dụng từ 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>

Kể từ năm 2016, đã thử nghiệm và hoạt động trên Chrome, Firefox, IE11, thậm chí IE8 (xem phần cuối cùng ở đây ; Stack Snippets không hỗ trợ IE8).

Đây là một giải pháp jQuery:

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

Với điều này, bạn có thể làm

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

• JsFiddle
• Jsin

Các giải pháp ở đây là đúng ngoại trừ mã mở rộng jQuery.

Hàm mở rộng sẽ lặp lại qua từng phần tử được chọn và quay lại thishỗ trợ chuỗi. Dưới đây là những một phiên bản chính xác:

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

Tôi tìm thấy một giải pháp hiệu quả cho tôi:

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

Bây giờ bạn có thể di chuyển tiêu điểm đến cuối của bất kỳ yếu tố nào bằng cách gọi:

$(element).focusEnd();

Hoặc bạn chỉ định vị trí.

$(element).setCursorPosition(3); // This will focus on the third character.

Điều này làm việc với tôi trên Safari 5 trên Mac OSX, jQuery 1.4:

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

Tôi nhận ra rằng đây là một bài viết rất cũ, nhưng tôi nghĩ rằng tôi nên cung cấp một giải pháp đơn giản hơn để cập nhật nó chỉ bằng jQuery.

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,"\n",secondSlice].join('');

    return new_text;
}

Cách sử dụng để sử dụng ctrl-enter để thêm một dòng mới (như trong Facebook):

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

Tôi cởi mở để phê bình. Cảm ơn bạn.

CẬP NHẬT: Giải pháp này không cho phép chức năng sao chép và dán bình thường hoạt động (ví dụ: ctrl-c, ctrl-v), vì vậy tôi sẽ phải chỉnh sửa phần này trong tương lai để đảm bảo rằng phần đó hoạt động trở lại. Nếu bạn có một ý tưởng làm thế nào để làm điều đó, xin vui lòng bình luận ở đây, và tôi sẽ rất vui khi thử nghiệm nó. Cảm ơn.

Trong IE để di chuyển con trỏ trên một số vị trí, mã này là đủ:

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

Tôi đang sử dụng cái này: http://plugins.jquery.com/project/jCaret

Đặt tiêu điểm trước khi bạn đã chèn văn bản vào textarea như vậy?

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

Điều này làm việc cho tôi trong chrome

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

Rõ ràng bạn cần độ trễ từ một phần triệu giây trở lên, vì thông thường người dùng tập trung vào trường văn bản bằng cách nhấp vào một số vị trí trong trường văn bản (hoặc bằng cách nhấn tab) mà bạn muốn ghi đè, vì vậy bạn phải đợi đến vị trí đó được đặt bởi người dùng nhấp và sau đó thay đổi nó.

Chỉ cần nhớ trả về false ngay sau khi gọi hàm nếu bạn đang sử dụng các phím mũi tên vì Chrome sẽ tạo ra frack khác.

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

Dựa trên câu hỏi này , câu trả lời sẽ không hoạt động hoàn hảo cho tức là và opera khi có dòng mới trong textarea. Câu trả lời giải thích cách điều chỉnh selectStart, selectEnd trước khi gọi setSelectionRange.

Tôi đã thử điều chỉnh Offerset từ câu hỏi khác với giải pháp được đề xuất bởi @AVProgrammer và nó hoạt động.

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

Sửa đổi nhỏ cho mã tôi tìm thấy trong bitbucket

Mã bây giờ có thể chọn / tô sáng với điểm bắt đầu / kết thúc nếu được cho 2 vị trí. Đã thử nghiệm và hoạt động tốt trong FF / Chrome / IE9 / Opera.

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

Mã được liệt kê dưới đây, chỉ một vài dòng thay đổi:

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

Tôi đã phải làm việc này cho các phần tử có thể nội dung và jQuery và nghĩ rằng ai đó có thể muốn nó sẵn sàng để sử dụng:

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

Cách sử dụng $(selector).getCaret()trả về số bù và $(selector).setCaret(num)thiết lập offset và đặt trọng tâm vào phần tử.

Cũng là một mẹo nhỏ, nếu bạn chạy $(selector).setCaret(num)từ bàn điều khiển, nó sẽ trả về console.log nhưng bạn sẽ không hình dung được trọng tâm vì nó được thiết lập ở cửa sổ giao diện điều khiển.

Tốt nhất; D

Bạn có thể trực tiếp thay đổi nguyên mẫu nếu setSelectionRange không tồn tại.

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

liên kết jsFiddle