Dừng con trỏ từ nhảy đến cuối trường nhập trong javascript thay thế

Question

Tôi đang sử dụng cụm từ thông dụng để tách các ký tự không hợp lệ ra khỏi vùng nhập văn bản trong javascript (đang chạy trong IE). Tôi chạy chức năng thay thế trên mọi sự kiện keyup. Tuy nhiên, điều này làm cho con trỏ nhảy đến cuối hộp văn bản sau mỗi lần nhấn phím, điều này làm cho việc chỉnh sửa nội tuyến không thể thực hiện được.

Đây là nó trong hành động:

http://jsbin.com/ifufuv/2

Có ai biết làm thế nào để làm cho nó để con không nhảy đến cuối của hộp đầu vào?

Answer 1

Bạn sẽ phải đặt con trỏ trở lại vị trí mong muốn. Đối với IE9, hãy đặt .selectionStart và .selectionEnd (hoặc sử dụng .setSelectionRange(start, end)). Đối với IE8 trở về trước, hãy sử dụng .createTextRange() và gọi .moveStart() trên phạm vi văn bản.

Answer 2

Ngoài gilly3's answer, tôi nghĩ ai đó có thể thấy hữu ích khi xem đoạn mã thực.

Trong ví dụ bên dưới, thuộc tính selectionStart được truy xuất từ ​​phần tử input trước thao tác chuỗi JavaScript. Sau đó, selectionStart được đặt trở lại vị trí ban đầu sau thao tác.

Tùy thuộc vào những gì bạn đang cố gắng đạt được, bạn cũng có thể truy cập selectionEnd thay cho số selectionStart và đặt phạm vi: setSelectionRange(start, end).

document.getElementById('target').addEventListener('input', function (e) { 
 
    var target = e.target, 
 
     position = target.selectionStart; // Capture initial position 
 
    
 
    target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move. 
 
    
 
    target.selectionEnd = position; // Set the cursor back to the initial position. 
 
});

<p>The method <code>.replace()</code> will move the cursor's position, but you won't notice this.</p> 
 
<input type="text" id="target" />