keyupはもう古い!! inputイベントを使って、スマホでも安心入力設計

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
1970年代の音楽を聞くと「懐かしい!!!」と感じる下駄です。
 

ブラウザ対応のWEBサービスを作っていると、必ず問題になるのが、スマートフォン対応です。
 

ゲームなどのプログラムだとあまり問題になり難いのですが、ビジネス・サービス系であれば、大抵の場合が入力フォームが発生して、PCのIE対応から、スマートフォンの万人アクセスまで、問題なく動作する要求をされがちです。
 

もちろん、ブラウザ対応とするサービスであれば、このぐらいの覚悟をして挑まなければいけませんが、実際にご完成が難しい状況が発生すると、気が狂いそうになります・・・あqすぇdrftgyふじこlp・・・取り乱してしまいました。(ひさしぶりのふじこですね・・・)
 

そして、そんな入力フォーム系のハマりがちなポイントとして、キーボード入力判定があります。
 

鬼門になりがちなキーボードイベント

パソコンを使ってのキーボードイベントといえば、
 

keydown
keyup
keypress

 

などがありますが、このへんはどのPCブラウザでもサポートされており、難なく搭載することができるのですが、iOSのデフォルトキーボードを使っていると、2バイト文字を入力する際に、keypressが正常動作しないとか、keyupが反応しないケースが発生します。
 

最近になって知ったのですが、そんな時は、「input」イベントを使うといいらしいです。
 

IE6ぐらいからのWEBエンジニアであれば、「なんじゃそりゃ!!!!!」となると思いますが、oninputというイベントがIE9以降から(他のブラウザは比較的古いバージョンから)搭載されています。
 

inputタグに対して、「入力したよ」というイベントで、keyupよりも使い勝手はいいかもしれません。
 

少なくともほぼ使われないkeydownよりは使えます。
※何故keydownが使えないかは今回は説明を割愛します。

inputイベントについて

https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/oninput
 

リファレンスサイトを見ると、以下のように説明書きが書かれています。
 

window 上の input イベントのためのイベントハンドラです。input イベントは、 <input> 要素の値が変化したときに発生します。

 

値が変更されたというのは、keyupと同じ様なタイミングなのでしょうか?
 

以下のプログラムを実行して少し調べてみました。
 

 

このHTMLをブラウザで開いて、javascriptコンソールを見てみると以下のような返答が返ってきます。
 

 

 

 

たまにダブって2回発生しているkey-upと比べてinputイベントは安定しているように見えます。
 

そして、keyupとほぼ同じタイミングで同じ挙動をしている事もわかるので、非常に使い勝手はよさそうですね。

iOSで確認

上記確認プログラムをiOSで実行してみます。
 

 

inputが最後の方にブランクになっている瞬間があります。
これは、「完了」または「改行(決定)」をスマホで押した際に発生するようですね。
 

key-upは、最後の文字列が取得できていないので、この時点でトラブル発生することがよくわかりますね。
 

これからはinputイベントを使おうっと!!!!
 

ブラウザ適用情報

https://caniuse.com/#search=event%20input
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です