Làm cách nào để di chuyển con trỏ đến vị trí cuối cùng của vùng văn bản trong Javascript?

Question

Tôi có một vùng văn bản và một nút trên biểu mẫu. Textarea có thể đã có một số văn bản trong đó. Tôi muốn con trỏ di chuyển đến vị trí cuối cùng trong vùng văn bản khi nút được nhấp.

Điều này có khả thi không?

Answer 1

Bằng "vị trí cuối cùng", bạn có ý là phần cuối của văn bản không?

Thay đổi ‘.value’ của trường biểu mẫu sẽ di chuyển con trỏ đến cuối trong mọi trình duyệt ngoại trừ IE. Với IE bạn có để có được bàn tay của bạn bẩn và cố tình thao tác lựa chọn, sử dụng giao diện phi tiêu chuẩn:

if (browserIsIE) { 
     var range= element.createTextRange(); 
     range.collapse(false); 
     range.select(); 
    } else { 
     element.focus(); 
     var v= element.value(); 
     element.value= ''; 
     element.value= v; 
    } 

Hoặc bạn có nghĩa là đặt con trỏ trở lại nơi nó đã được trước đó, lần cuối cùng textarea là tập trung?

Trong mọi trình duyệt ngoại trừ IE, điều này sẽ xảy ra chỉ bằng cách gọi ‘element.focus()’; trình duyệt nhớ vị trí con trỏ/lựa chọn cuối cùng cho mỗi đầu vào và đặt nó trở lại tiêu điểm.

Điều này sẽ khá phức tạp khi tái tạo trong IE. Bạn sẽ phải thăm dò ý kiến ​​mọi lúc để kiểm tra vị trí con trỏ/lựa chọn, và nhớ vị trí đó nếu nó ở trong phần tử đầu vào, sau đó tìm vị trí cho phần tử đã cho khi nhấn và khôi phục nó. Điều này liên quan đến một số thao tác thực sự khá tẻ nhạt của ‘document.selection.createRange()’.

Tôi không biết gì về jQuery có thể giúp bạn làm điều này, nhưng có thể có một plugin ở đâu đó có lẽ?

Answer 2

Câu trả lời của xgMz là tốt nhất cho tôi. Bạn không cần phải lo lắng về trình duyệt:

var html = $("#MyTextArea").val(); 
$("#MyTextArea").focus().val("").val(html); 

Và đây là một phần mở rộng jQuery nhanh chóng tôi đã viết để làm điều này cho tôi thời gian tiếp theo:

; (function($) { 
    $.fn.focusToEnd = function() { 
     return this.each(function() { 
      var v = $(this).val(); 
      $(this).focus().val("").val(v); 
     }); 
    }; 
})(jQuery); 

Sử dụng như thế này:

$("#MyTextArea").focusToEnd(); 

Answer 3

Đây là những gì tôi sử dụng cho textareas bên trong onclick của tôi hoặc các sự kiện khác và dường như làm việc tốt cho FireFox và IE 7 & 8. Nó định vị con trỏ ở cuối văn bản thay vì mặt trước.

this.value = "some text I want to pre-populate"; 
this.blur(); 
this.focus(); 

Answer 4

Để đặt tiêu điểm chuột và di chuyển con trỏ đến cuối đầu vào. Công việc của nó trong mọi trình duyệt, logic đơn giản của nó ở đây.

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

Answer 5

Bạn có thể sử dụng này https://github.com/DrPheltRight/jquery-caret

$('input').caretToEnd(); 

Answer 6

Bạn cũng có thể làm điều này:

$(document).ready(function() 
{ 
    var el = $("#myInput").get(0); 

    var elemLen = el.value.length; 

    el.selectionStart = elemLen; 
    el.selectionEnd = elemLen; 

    el.focus(); 
});​ 

Mã này làm việc cho cả hai input và textarea. Đã thử nghiệm với các trình duyệt mới nhất: Firefox 23, IE 11 và Chrome 28.

jsFiddle sẵn ở đây: http://jsfiddle.net/cG9gN/1/

Nguồn: https://stackoverflow.com/a/12654402/114029

Answer 7

tôi sửa đổi @mkaj mở rộng một chút để hỗ trợ giá trị mặc định

; (function($) { 
    $.fn.focusToEnd = function(defaultValue) { 
     return this.each(function() { 
      var prevValue = $(this).val(); 
      if (typeof prevValue == undefined || prevValue == "") { 
       prevValue = defaultValue; 
      } 
      $(this).focus().val("").val(prevValue); 
     }); 
    }; 
})(jQuery); 

// See it in action here 
$(element).focusToEnd("Cursor will be at my tail...");