處理了一個以日文 IME(半型假名模式)輸入數字時,按下 Enter,值就變成 2 倍的狀況。
這個表單用了一個自訂的 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 之後再執行。