建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。
最近遇到一個(gè)需求，就是我們?cè)?input 輸入內(nèi)容后，按下回車鍵，能夠讓 input 失去焦點(diǎn)，此外也可以觸發(fā)一些業(yè)務(wù)邏輯，比如保存數(shù)據(jù)到服務(wù)器。
我們通過事件對(duì)象判斷是否按下了 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 在使用輸入法的情況下回車也是會(huì)被觸發(fā)的（MacOS 會(huì)，Window 沒測(cè)試過，貌似不會(huì)）。
觸發(fā)是觸發(fā)了，但我們可以通過 event 對(duì)象的 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)，但主流瀏覽器為了兼容舊代碼還是會(huì)支持的，當(dāng)然不推薦就是了。話說很多廢棄的特性我們有時(shí)候還是會(huì)用的，畢竟瀏覽器也不敢真移除掉。
keypress 和 keydown 非常類似，區(qū)別是 keydown 按下任何鍵都會(huì)觸發(fā)，而 keypress 只會(huì)在按下字符鍵時(shí)觸發(fā)。簡(jiǎn)單來說，就是會(huì)產(chǎn)生修改文本內(nèi)容的字符就會(huì)觸發(fā)，比如 a、1 這些，像 shift 就不會(huì)觸發(fā)，不過 Enter 會(huì)觸發(fā)，因?yàn)槭擎I入一個(gè) “回車符”。
有一個(gè)特點(diǎn)就是在輸入法輸入內(nèi)容時(shí)，包括按下空格或回車讓內(nèi)容填入輸入框，都不會(huì)觸發(fā) keypress。
改用 keypress 而不是 keydown，就能保證輸入法的 Enter 不會(huì)觸發(fā)事件，自然就不會(huì)觸發(fā)后續(xù)的邏輯了。
新聞名稱：Input實(shí)現(xiàn)回車失焦，考慮輸入法的情況
當(dāng)前URL：http://m.fisionsoft.com.cn/article/djciehd.html
