在寫前端時，有時候會遇到需要在 Input 上偵測 Enter 事件來提供特殊功能，像是搜尋的 Input 可以增加 Enter 執行搜尋。

在使用 event.key 去判斷是否為 enter 時，應該會遇到輸入法選字也會誤判的問題。

本文記錄一下解法：

提供測試的 Input:

可以開啟 Browser 的 Debug Tool，在 Console 中觀察。

舊版解法

除了判斷 key 以外再增加判斷 keyCode，如果是在輸入法的操作，那 keyCode 就會是 229。 但新版的 JS 已將 keyCode 棄用，雖然大部分瀏覽器都還會提供這個屬性，不過我還是推薦直接使用新版解法比較保險。

Vanilla JS

document.getElementById('test-input').addEventListener('keydown', event => {
    if (event.key === 'Enter' && event.keyCode !== 229) {
        event.preventDefault();
        console.log("按下了 Enter");
    }
});

新版解法

除了判斷 key 以外再增加判斷 isComposing，如果是在輸入法的操作，那 isComposing 就會是 true。

Vanilla JS

document.getElementById('test-input').addEventListener('keyDown', e => {
    if (event.key === 'Enter' && !event.isComposing) {
        event.preventDefault(); // 防止換行
        // Do some...
    }
})

React

const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
	// 限制只在單獨按下 Enter 且非中文選字時才執行送出
	if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
		event.preventDefault(); // 防止換行
		// Do some...
	}
};

參考資料


感謝閱讀！

喜歡這篇文章或是有幫助到你嗎？ 歡迎分享給你的朋友！

有任何問題、回饋或您認為我會感興趣的任何東西嗎？ 請在下面發表評論，或者是直接聯絡我。

Puck Wang

Puck Wang

Hi！ 我是 Puck Wang，這個部落格的作者，是一位全端網站開發者，常使用 .Net 和 React 進行開發，專注於架構研究，你可以在這個部落格看到我精選的筆記內容，希望對你會有所幫助。

更多關於我的訊息，可至關於關於頁面。