處理了一個以日文 IME(半型假名模式)輸入數字時,按下 Enter,值就變成 2 倍的狀況。

組字中,輸入 123 組字完成,值變成 123123

這個表單用了一個自訂的 angular $formatter,每當輸入值變動時,便即時把非數字的字元移掉(使用 $element.val(newValue))。

先不論在 $formatter 中變更元素的值是否恰當,這個問題最後被釐清為一個情境,就是在 compositionend(IME 組字完成)事件中,如果以 JavaScript 修改 <input> 的 value,會發生什麼事呢?

經測試,Firefox 在「IME 送出字串」和「JS 設定的值」相同時,input 可以接受該值;反之不相同時,input 的值會被取消(變成空的)。

而這次的 bug 只會在 Google Chrome 上發生,input 內容會是「JS 設定的值」,後面再接著「IME 送出的最後一組字串」,合起來就是前面圖中的 123123。

測試用 jsfiddle:

Workaround

藉由 setTimeout 讓設值在 compositionend 之後再執行。