停止光標從跳轉到輸入字段在JavaScript替換

我正在使用正則表達式從JavaScript中的文本輸入區域（在IE中運行）中去除無效字符。我在每個keyup事件上運行replace函數。但是，這會使光標在每次按鍵後跳到文本框的末尾，這使內聯編輯變得不可能。停止光標從跳轉到輸入字段在JavaScript替換

這是它在行動：

http://jsbin.com/ifufuv/2

有誰知道如何使它所以光標不會跳轉到輸入框的結束？

來源

2011-11-21 Petey B

我強烈建議你選擇一個更好的事件來處理。 'onkeyup'對於檢測用戶輸入很差。請參閱http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript。 –

下面是一個完全實現的示例，說明如何在替換textarea的值時保持選擇：http://stackoverflow.com/questions/3286595/update-textarea-value-but-keep-cursor-position/3288215#3288215 –

您必須手動將光標放回您想要的位置。對於IE9，請設置.selectionStart和.selectionEnd（或使用.setSelectionRange(start, end)）。對於IE8及更早版本，請使用.createTextRange()並在文本範圍內調用.moveStart()。

來源

2011-11-21 22:55:48 gilly3

W3School有一個關於如何使用onkeypress取消鍵的精彩例子（在他們的例子中，它取消了數字，並且你似乎有足夠的能力修改正則表達式來取出你不想要的字符）。 http://www.w3schools.com/jsref/event_onkeypress.asp – John

@Mike：W3Schools並不值得像你這樣的人爲他們宣傳他們的網站。看一看http://w3fools.com - w3s上的很多信息都是錯誤的，或者促進了開發人員的不良做法。網絡上有更好的資源，例如http://quirksmode.org或http://developer.mozilla.org。 –

我不是w3schools的粉絲：http：//w3fools.com/。 – gilly3

除了gilly3's answer，我還以爲有人會發現看到一個實際的代碼片段很有用。

在下面的示例中，selectionStart屬性是在處理JavaScript字符串之前從input元素中檢索的。然後selectionStart被設置回後的初始位置的操作。

根據您要達到的目標，您還可以使用selectionEnd代替selectionStart，並設置範圍：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" />

來源

2015-04-03 23:20:28

我做了一個基於你的代碼的快速要點，並且可以輕鬆地重構函數https://gist.github.com/romuleald/f1b980d5ad01b9f525e8e0244f91711a – romuleald

停止光標從跳轉到輸入字段在JavaScript替換

回答

相關問題