vue.js input 在 ios 上面 event hook 跟 android 不同

最近流行搜尋不用點 enter 或 確定
只要改變 input 就會自動搜尋
但 input 改變的時間點很重要,
尤其在中文拼字的時候,
不然就會撈到空值,

input(
   @keydown="onShowMsg('down')"
   @keyup="onShowMsg('keyup')"
   @change="onShowMsg('change')"
   @input="onShowMsg('input')"
)

輸入"ㄒ" "一" "ㄠ" 在點 "小"
在 ios12 iPhone8 上測試,會得到

[Log] down     字未拼完     "ㄒ"
[Log] input     字未拼完     "ㄒ"
[Log] keyup     字未拼完     "ㄒ"
[Log] down     字未拼完     "一"
[Log] input     字未拼完     "一"
[Log] keyup     字未拼完     "一"
[Log] down     字未拼完     "ㄠ"
[Log] input     字拼完     "ㄠ"
[Log] keyup     字拼完     "ㄠ"
[Log] input (x3)     字拼完     "小"
[Log] input     字拼完     "小"

雖然最終值是對的,但卻沒有明確得完成觸發點
後來改用 watch 來偵聽
input 的 data 結果就相當滿意

[Log] down     字未拼完     "ㄒ"
[Log] input     字未拼完     "ㄒ"
[Log] keyup     字未拼完     "ㄒ"
[Log] down     字未拼完     "一"
[Log] input     字未拼完     "一"
[Log] keyup     字未拼完     "一"
[Log] down     字未拼完     "ㄠ"
[Log] input     字拼完     "ㄠ"
[Log] keyup     字拼完     "ㄠ"
[Log] input (x3)     字拼完     "小"
[Log] input     字拼完     "小"
[Log] change     字拼完     "小"

留言