【vue】@input - 微軟中文輸入法異常(輸入一個字母會顯示多個)


問題1: windows 電腦用微軟中文輸入法輸入一個字符會顯示多個
問題2: mac或者其他中文輸入法輸入都會有閃爍的抖動感
問題3:由於需求所定,這是一個自定義的輸入框,並且要實時更新,所以用不了v-model 與@blur
(用mac電腦沒重現輸入一個字符變多個,截圖了測試提的bug,bug被關了只剩個模糊的圖片~~~)

問題分析

使用 :value, @input - 輸入法異常;
使用 v-model 指令 - 輸入法正常;
使用@blur- 輸入法正常。

  1. v-model源碼分析
    v-model使用的也是input事件

    v-model 判斷了 composing 屬性,當輸入法組合沒有結束的時候,直接返回,並沒有賦值

2.@blur是失焦后才賦值,此時輸入法已結束;@input 沒有檢測輸入法結束就直接賦值。

問題思考

是否可以參考v-model的方法,監測輸入法結束時再給value賦值

參考v-model 使用的Composition

根據官方規范,Composition 事件觸發順序如下:
  1. 輸入開始時觸發 compositionstart
  2. 選擇字/詞完成輸入時觸發 compositionend

那么通過 Composition 事件,在 compositionend 賦值而非直接賦值既可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM