Vuejs v-model 中文輸入問題(IME問題)

Han
2 min readApr 11, 2019

--

近期在專案中使用v-model發生中文字被截斷的情形(例如:用注音輸入法輸入"我"這個字,會被切換成ㄨㄛˇ三個字元),這種情況用一般瀏覽器都不會發生,只有在使用手機輸入中文在等待選擇的情況下會發生。經查找相關資料後,確認該問題與事件 compositionstartcompositionend有關係。compositionstart代表文字組合開始(例如:注音的我就分成,ㄨㄛˇ),compositionend代表文字組合結束,直到這時候才算是完整組成一個確定的文字。

解決方式(範例):

因為找了一些相關資料,發現v-model本身就已經支援了,目前尚未確認為何將該功能放到其他子組件且跑v-for去生成輸入框的情況下會發生。因此採用更妥善的方式來實作input

參考資料:

https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart

https://www.itread01.com/article/1527639948.htm

https://segmentfault.com/a/1190000009246058

--

--