Đặt tiêu điểm chuột và di chuyển con trỏ đến cuối đầu vào bằng jQuery

Câu hỏi này đã được hỏi ở một số định dạng khác nhau nhưng tôi không thể nhận được bất kỳ câu trả lời nào phù hợp với kịch bản của mình.

Tôi đang sử dụng jQuery để triển khai lịch sử lệnh khi người dùng nhấn vào mũi tên lên / xuống. Khi mũi tên lên được nhấn, tôi thay thế giá trị đầu vào bằng lệnh trước đó và đặt tiêu điểm vào trường nhập, nhưng muốn con trỏ luôn được đặt ở cuối chuỗi nhập.

Mã của tôi, như sau:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
// and it continues on from there

Làm cách nào để buộc đặt con trỏ ở cuối 'đầu vào' sau tiêu điểm?

Có vẻ như việc xóa giá trị sau khi lấy nét và sau đó đặt lại hoạt động.

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

Nó trông hơi kỳ quặc, thậm chí là ngớ ngẩn, nhưng điều này đang làm việc với tôi:

input.val(lastQuery);
input.focus().val(input.val());

Bây giờ, tôi không chắc mình đã sao chép thiết lập của bạn. Tôi giả sử inputlà một <input>phần tử.

Bằng cách đặt lại giá trị (cho chính nó), tôi nghĩ rằng con trỏ đang được đặt ở cuối đầu vào. Đã thử nghiệm trên Firefox 3 và MSIE7.

Hy vọng điều này sẽ giúp bạn:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

Chris Coyier có một plugin jQuery mini hoạt động hoàn toàn tốt: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Nó sử dụng setSelectionRange nếu được hỗ trợ, nếu không sẽ có một dự phòng vững chắc.

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    $(this).focus()
    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)
      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;
      this.setSelectionRange(len, len);
    } else {
      // ... otherwise replace the contents with itself
      // (Doesn't work in Google Chrome)
      $(this).val($(this).val());
    }
    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;
  });
};

Sau đó, bạn chỉ có thể làm:

input.putCursorAtEnd();

Còn trong một dòng duy nhất thì sao ...

$('#txtSample').focus().val($('#txtSample').val());

Dòng này phù hợp với tôi.

Câu trả lời của 2 artlung : Nó chỉ hoạt động với dòng thứ hai trong mã của tôi (IE7, IE8; Jquery v1.6):

var input = $('#some_elem');
input.focus().val(input.val());

Bổ sung: nếu phần tử đầu vào được thêm vào DOM bằng JQuery, tiêu điểm không được đặt trong IE. Tôi đã sử dụng một mẹo nhỏ:

input.blur().focus().val(input.val());

Tham khảo: @ will824 Bình luận, Giải pháp này phù hợp với tôi mà không có vấn đề về tính tương thích. Các giải pháp còn lại không thành công trong IE9.

var input = $("#inputID");
var tmp = input.val();
input.focus().val("").blur().focus().val(tmp);

Đã kiểm tra và thấy hoạt động ở:

Firefox 33
Chrome 34
Safari 5.1.7
IE 9

Tôi biết câu trả lời này đến muộn, nhưng tôi có thể thấy mọi người không tìm thấy câu trả lời. Để ngăn phím lên đặt con trỏ ở đầu, chỉ return falsetừ phương thức xử lý sự kiện. Thao tác này dừng chuỗi sự kiện dẫn đến chuyển động của con trỏ. Dán mã đã sửa đổi từ OP bên dưới:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
      // HERE IS THE FIX:
      return false; 
// and it continues on from there

Tôi sử dụng mã bên dưới và nó hoạt động tốt

function to_end(el) {
            var len = el.value.length || 0;
            if (len) {
                if ('setSelectionRange' in el) el.setSelectionRange(len, len);
                else if ('createTextRange' in el) {// for IE
                    var range = el.createTextRange();
                    range.moveStart('character', len);
                    range.select();
                }
            }
        }

Nó sẽ khác nhau đối với các trình duyệt khác nhau:

Điều này hoạt động trong ff:

    var t =$("#INPUT");
    var l=$("#INPUT").val().length;
    $(t).focus();

    var r = $("#INPUT").get(0).createTextRange();
    r.moveStart("character", l); 
    r.moveEnd("character", l);      
    r.select();

Thông tin chi tiết có trong các bài viết này tại SitePoint , AspAlliance .

như người khác đã nói, clear and fill phù hợp với tôi:

    var elem = $('#input_field');
    var val = elem.val();
    elem.focus().val('').val(val);

đặt giá trị trước. sau đó đặt tiêu điểm. khi tiêu điểm, nó sẽ sử dụng giá trị tồn tại tại thời điểm tiêu điểm, vì vậy giá trị của bạn phải được đặt trước.

logic này phù hợp với tôi với một ứng dụng điền một <input>giá trị của một lần nhấp <button>. val()được đặt đầu tiên. sau đófocus()

$('button').on('click','',function(){
    var value = $(this).attr('value');
    $('input[name=item1]').val(value);
    $('input[name=item1]').focus();
});

Tôi đã tìm thấy điều tương tự như được đề xuất ở trên bởi một vài người. Nếu bạn focus()trước tiên, sau đó đẩy giá val()trị đầu vào, con trỏ sẽ được định vị đến cuối giá trị đầu vào trong Firefox, Chrome và IE. Nếu bạn đẩy val()con trỏ vào trường nhập liệu đầu tiên, Firefox và Chrome định vị con trỏ ở cuối, nhưng IE sẽ đặt con trỏ ở phía trước khi bạn focus().

$('element_identifier').focus().val('some_value') 

nên thực hiện thủ thuật (dù sao nó vẫn luôn có đối với tôi).

Lúc đầu, bạn phải đặt tiêu điểm vào đối tượng hộp văn bản đã chọn và tiếp theo bạn đặt giá trị.

$('#inputID').focus();
$('#inputID').val('someValue')

    function focusCampo(id){
        var inputField = document.getElementById(id);
        if (inputField != null && inputField.value.length != 0){
            if (inputField.createTextRange){
                var FieldRange = inputField.createTextRange();
                FieldRange.moveStart('character',inputField.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }else if (inputField.selectionStart || inputField.selectionStart == '0') {
                var elemLen = inputField.value.length;
                inputField.selectionStart = elemLen;
                inputField.selectionEnd = elemLen;
                inputField.focus();
            }
        }else{
            inputField.focus();
        }
    }

$('#urlCompany').focus(focusCampo('urlCompany'));

hoạt động cho tất cả các trình duyệt tức là ..

Đây là một cái khác, một cái lót không gán lại giá trị:

$("#inp").focus()[0].setSelectionRange(99999, 99999);

function CurFocus()
{
    $('.txtEmail').focus(); 
}

function pageLoad()
{
   setTimeout(CurFocus(),3000);
}

window.onload = pageLoad;

Câu trả lời từ công trình scorpion9. Chỉ để làm rõ hơn, hãy xem mã của tôi bên dưới,

<script src="~/js/jquery.js"></script> 
<script type="text/javascript">
    $(function () {
        var input = $("#SomeId");
        input.focus();
        var tmpStr = input.val();
        input.val('');
        input.val(tmpStr);
    });
</script>

Nó sẽ lấy nét bằng con trỏ chuột

$ ("# TextBox"). Focus ();