WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
久々にJavaScriptの忘備録です。inputフォーム内の入力内容をキャンセルするボタンがiOSデバイスで動かなかった場合の対策方法。具体的にはタップ操作で貼り付けた値のみ認識できないとった現象でした。
下記に解決策を記載させていただきます。
JavaScriptの「addEventListener」でkeyupがiOSで効かない回避策
下記の実装ではiOS環境でタップ操作から貼り付け直後の値を読み取れません。コピペしてフォーム内に入力した文字が認識されないという意味ですね。入力されているはずの文字が存在しない扱いとなります。
document.addEventListener('keyup', text_input_check);
function text_input_check(e) {
// キーを離した時の処理
return false;
}解決策は「keyup」の代わりに「input」という動作に変えるだけでOKです。
document.addEventListener('input', text_input_check);
function text_input_check(e) {
// フォームで文字が入力された時の処理
return false;
}イベントの種類は他もいくつかあります。
| click | マウスでタグ要素内をクリックして離した時 |
|---|---|
| copy | 選択範囲がクリップボードにコピーされた時 |
| input | value値が変更された時 |
| keydown | キーボードで任意のキーが押された時 |
| keyup | キーボードでキーを離した時 |
| load | ページの読込みが完了した時 |
| paste | クリップボードからアイテムが貼り付けられた時 |
| resize | 画面サイズが変更された時 |
| scroll | 画面がスクロールされた時 |
| select | マウスでテキストを選択している時 |
| submit | フォームのサブミットボタン（送信ボタン）が押された時 |
ちなみに「input」イベントは「input/select/textarea」各要素のvalue値が変更された時に発生。フォームに入力された値を判定して処理を行いたい場合に使えます。iOSでもPC同様に動くイベントなので安心です。
ぜひご参考くださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
