PCとスマホ端末のevent発火の違いをまとめました
こちらはtextareaを対象にしています。
textareaにforcusした際
PC, スマホに差異はありませんでした
PCの場合
touchstart
touchend
touchend
mouseover
mousemove
mousedown
focus
mouseup
スマホ端末の場合(iOS)
touchstart
touchend
touchend
mouseover
mousemove
mousedown
focus
mouseup
textareaにキー入力した際
PCでは keypress
が発生しないこと、keydown
keyup
が2回発生すること
などの差違がありました
ついでに focus
なども発生しません
PCの場合
keydown - textarea.value = ""
keyup - textarea.value = "あ"
keydown - textarea.value = "あ"
keyup - textarea.value = "あ"
change - textarea.value = "あ"
blur - textarea.value = "あ"
focus - textarea.value = "あ"
blur - textarea.value = "あ"
スマホ端末の場合(iOS)
keydown - textarea.value = ""
keypress - textarea.value = ""
keyup - textarea.value = "あ"
textareaにコピー&ペーストした際
PCの場合
focus - textarea.value = ""
touchstart - textarea.value = ""
touchend - textarea.value = ""
touchend - textarea.value = ""
mousemove - textarea.value = ""
mousedown - textarea.value = ""
mouseup - textarea.value = ""
keydown - textarea.value = ""
keydown - textarea.value = ""
paste - textarea.value = ""
keyup - textarea.value = "あ"
keydown - textarea.value = "あ"
keypress - textarea.value = "あ"
keyup - textarea.value = "あ"
change - textarea.value = "あ"
blur - textarea.value = "あ"
スマホ端末(iOS)の場合
※ ペーストし、textareaに反映された後のイベントの発火がない
touchstart - textarea.value = ""
touchend - textarea.value = ""
touchend - textarea.value = ""
ペースト選択ボタンが出る
ペーストボタン押下
paste - textarea.value = ""
この後タッチなどをしてイベントを発火させるとvalueの中身が入っていることが確認できた
これを防ぐには setTimeout
などで 0.1
秒遅らせたりいろいろなんか対応する必要がある・・・(;;
こんな素敵な記事がありました
http://manji602.hatenablog.com/entry/20130829/1377767902
まとめ
発火タイミング・イベントの種類・発火回数などなど、いろいろと差が確認できました
大変ですね・・・
単純にログを出して見ただけなので、なにかご指摘ありましたらお気軽にお願いいたします。