chrome setSelectionRange() không hoạt động trong handler oninput

Question

Tôi đang làm việc với một số mã tự động hoàn thành. setSelectionRange() được sử dụng để chọn văn bản được hoàn thành trong oninput trình xử lý sự kiện. Nó hoạt động ít nhất trong Firefox 14, nhưng không hoạt động trong Chrome (6, 17).

Giản đoạn mã thể hiện vấn đề là như thế này:

<input type='text' oninput='select()' /> 

function select(e){ 
    var s = this.value; 
    if (s.length) 
     this.setSelectionRange(s.length-1, s.length); 
} 

tôi sửa lỗi mã trong chrome, và nó quay ra văn bản đã được chọn ở bên phải đầu tiên sau khi setSelectionRange() được thực hiện , nhưng lựa chọn đã biến mất sau đó.

Nếu tôi ràng buộc xử lý để onclick thay vì oninput, như thế này:

<input type='text' onclick='select()' /> 

sau đó cả hai trình duyệt hoạt động tốt.

Có ai vui lòng cho tôi một số đầu mối để thực hiện lựa chọn trong Chrome không?

Answer 1

Có một số vấn đề với mã của bạn, cụ thể là các thông số chuyển vào select() chức năng là sai: this sẽ window và e sẽ được định nghĩa. Ngoài ra, việc sử dụng select() làm tên hàm trong thuộc tính oninput gây ra sự cố vì chọn sẽ giải quyết theo phương thức select() của chính đầu vào. Cách tiếp cận tốt hơn thường là đặt trình xử lý sự kiện trong tập lệnh thay vì thông qua thuộc tính trình xử lý sự kiện.

Tuy nhiên, sự cố vẫn tồn tại ngay cả sau khi sửa các vấn đề này. Có thể sự kiện input sẽ kích hoạt trước khi trình duyệt di chuyển dấu nháy trong Chrome. Một cách giải quyết đơn giản là sử dụng bộ hẹn giờ, mặc dù điều này là phụ tối ưu vì có khả năng người dùng sẽ có thể nhập một ký tự khác trước khi bộ hẹn giờ kích hoạt.

Demo: http://jsfiddle.net/XXx5r/2/

Code:

<input type="text" oninput="selectText(this)"> 

<script type="text/javascript"> 
function selectText(input) { 
    var s = input.value; 
    if (s.length) { 
     window.setTimeout(function() { 
      input.setSelectionRange(s.length-1, s.length); 
     }, 0); 
    } 
} 
</script>