【Vue筆記】監聽拼字輸入法觸發的 composition events

中文輸入法跟英文輸入最大的區別大概就是拼音了吧~

這次在專案中碰到要限制輸入的字數，但又不能把正在輸入的拼音選字給阻擋掉，所以不能單純限制輸入中的字數，於是查到了這個拼音輸入法會觸發的事件 composition event。

composition event

拼音輸入時，觸發階段總共有三個：

compositionstart 開始輸入(拼音、注音)

compositionupdate 選字或拼音更改

compositionend 結束輸入(拼音、注音)

chrome 版本兼容上的問題

Q: chrome 49 能監聽 compositionstart / compositionend 嗎?

可以，composition events 支援 chrome ver.15-最新。

Q: chrome 49 跟新版本 chrome (ver.114) 在觸發上的不同?

A: chrome 49 輸入中文結束後的 enter 會觸發 input，新版不會，要另外處理，並且新版小鍵盤英數會被當成中文字判斷。

拼音輸入法在其他輸入event上的區別

Q: 用 input / keypress / keyup 的影響?

A: input 打注音會直接呈現注音在上面，因為handler將event.value邊輸入邊儲存的關係。用keypress的話不會有上述影響，但是輸入完要再按一次enter才會觸發到儲存的handler。

如果有限制字數，輸入超過限制的話，keyup 會卡在注音輸入的地方。

在Vue使用

Q: v-model 在處理中文輸入的原理?

A: 是使用 compositionstart / compositionend 去判斷儲存時機。

Q: 怎麼利用 compositionstart / compositionend 搭配輸入處理的handler?

A: 搭配input，觸發順序 compositionstart > compositionupdate > compositionend > input，處理輸入的 handler 放在 input，所以在 compositionstart 觸發時讓輸入時 input 的觸發被跳過，compositionend 觸發時恢復 input 觸發，即可在完成中文輸入時才將 value 存進 input 裡的 handler。