大家好，我是前端西瓜哥。

最近遇到一個(gè)需求，就是我們在 input 輸入內(nèi)容后，按下回車鍵，能夠讓 input 失去焦點(diǎn)，此外也可以觸發(fā)一些業(yè)務(wù)邏輯，比如保存數(shù)據(jù)到服務(wù)器。

我們通過事件對象判斷是否按下了 Enter（event.key === 'Enter'），如果按下，調(diào)用 input.blur()。

通常認(rèn)為用戶輸入法輸入內(nèi)容然后回車，是因?yàn)殄e(cuò)誤使用了輸入法，回車后可以將內(nèi)容輸入到 input 中，但還是 Work In Process（半成品）狀態(tài)，不希望觸發(fā)失焦邏輯，希望用戶可以繼續(xù)編輯。

比如你不希望在聊天框輸入法一回車就將消息發(fā)送了。

有兩種方案。

event.isComposing

容易想到的是使用 keydown。

keydown 在使用輸入法的情況下回車也是會被觸發(fā)的（MacOS 會，Window 沒測試過，貌似不會）。

觸發(fā)是觸發(fā)了，但我們可以通過 event 對象的 isComposing 屬性判斷是否在使用輸入法。

handleKeydown=(e) => {
  if (e.key === 'Enter' && !e.isComposing) {
    e.currentTarget.blur();
  }
}

另外，瀏覽器是支持輸入法事件的：

• compositionstart 表示 開始 使用輸入法輸入內(nèi)容；
• compositionupdate 表示 正在使用 輸入法輸入內(nèi)容；
• compositionend 表示使用輸入法 輸入完畢。

keypress

keypress 已經(jīng)是廢棄狀態(tài)，但主流瀏覽器為了兼容舊代碼還是會支持的，當(dāng)然不推薦就是了。話說很多廢棄的特性我們有時(shí)候還是會用的，畢竟瀏覽器也不敢真移除掉。

keypress 和 keydown 非常類似，區(qū)別是 keydown 按下任何鍵都會觸發(fā)，而 keypress 只會在按下字符鍵時(shí)觸發(fā)。簡單來說，就是會產(chǎn)生修改文本內(nèi)容的字符就會觸發(fā)，比如 a、1 這些，像 shift 就不會觸發(fā)，不過 Enter 會觸發(fā)，因?yàn)槭擎I入一個(gè) “回車符”。

有一個(gè)特點(diǎn)就是在輸入法輸入內(nèi)容時(shí)，包括按下空格或回車讓內(nèi)容填入輸入框，都不會觸發(fā) keypress。

改用 keypress 而不是 keydown，就能保證輸入法的 Enter 不會觸發(fā)事件，自然就不會觸發(fā)后續(xù)的邏輯了。