當在按鍵事件處理程序中聚焦textarea元素時，Firefox出現問題

Question

以下代碼段適用於chrome / edge / safari。 在Firefox中， textarea變得集中，但沒有將按下的字符添加到textarea -第一個字符將始終丟失。

 document.addEventListener('keypress', (event) => { document.querySelector('#input').focus(); }); 

 <textarea id="input"></textarea> 

如何在所有瀏覽器中保持一致？

Answer 1

這是在沒有瀏覽器嗅探的情況下使其工作的方法：發生按鍵時，將處理程序綁定到textarea上的input事件，並設置0毫秒超時。

如果瀏覽器接受了textarea的按下鍵，則input處理程序將在超時之前運行（因為input事件同步觸發）。 如果發生這種情況，則說明瀏覽器已正確處理了按鍵，並且可以取消超時。

然后， 如果超時觸發，您會知道input事件尚未觸發，因此尚未將字符添加到文本區域，因此可以通過編程方式進行操作。

在事件處理程序和超時處理程序中，都取消綁定事件處理程序–它最多應運行一次（每次按鍵）。

 var textarea = document.getElementById("input"); document.addEventListener("keypress", function (event) { if (event.target === textarea) { return; } var eventHandler = function () { textarea.removeEventListener("input", eventHandler); clearTimeout(timeoutId); console.log("input event"); } var timeoutHandler = function () { var character = ("char" in event) ? event.char : String.fromCharCode(event.charCode); textarea.value += character; textarea.removeEventListener("input", eventHandler); console.log("timeout fired"); } timeoutId = setTimeout(timeoutHandler, 1); textarea.addEventListener("input", eventHandler); textarea.focus(); }); 

 <textarea id="input"></textarea> <p style="background: #ccc"> <b>Click here</b> to make sure the document is focused, but the textarea is not. Then press a key. </p> 

如果您在Firefox中嘗試上述代碼段，則控制台將顯示“超時觸發”。 在所有其他瀏覽器中，它將說“輸入事件”。 無論哪種情況，您所按下的鍵都會添加到文本區域。

一些注意事項：

• 從技術上講，對於一致的行為，您需要做的不僅僅是將字符追加到末尾。 您還必須查看光標位置和文本選擇之類的內容。 但是，這可能是過大的。

• 如果需要支持真正的舊瀏覽器，則可能需要對input事件的可用性進行功能檢查。

• 如果您有其他依賴文本區域的代碼在按鍵時同步更改，則可能必須在那里進行更新。

Answer 2

而如果任何其他瀏覽器共享相同的行為，火狐這個代碼將無法正常工作，下面的代碼將添加任何按鍵輸入，因為它是一個字符，其字符串長度為1，當代碼在Firefox上運行：

 var mozFocused = false; document.addEventListener('keypress', (event) => { document.querySelector('#input').focus(); var isFirefox = typeof InstallTrigger !== 'undefined'; if (isFirefox && !mozFocused && event.key.length === 1) { mozFocused = true; document.querySelector('#input').value += event.key; } }); document.querySelector('#input').addEventListener('blur', (event) => { mozFocused = false; }); 

 <textarea id="input"></textarea> 

同樣，請注意，這不能保證它能在所有瀏覽器上正常運行，因為這是專門針對Firefox的修復程序，但是，如果您看到其他瀏覽器中也發生了相同的行為，我將使用此SO帖子中的答案來檢測當前瀏覽器客戶端正在使用（假設它在本文討論的瀏覽器列表中）： 如何檢測Safari，Chrome，IE，Firefox和Opera瀏覽器？