1970年代の音楽を聞くと「懐かしい！！！」と感じる下駄です。
ブラウザ対応のWEBサービスを作っていると、必ず問題になるのが、スマートフォン対応です。
ゲームなどのプログラムだとあまり問題になり難いのですが、ビジネス・サービス系であれば、大抵の場合が入力フォームが発生して、PCのIE対応から、スマートフォンの万人アクセスまで、問題なく動作する要求をされがちです。
もちろん、ブラウザ対応とするサービスであれば、このぐらいの覚悟をして挑まなければいけませんが、実際にご完成が難しい状況が発生すると、気が狂いそうになります・・・あｑすぇｄｒｆｔｇｙふじこｌｐ・・・取り乱してしまいました。（ひさしぶりのふじこですね・・・）
そして、そんな入力フォーム系のハマりがちなポイントとして、キーボード入力判定があります。
鬼門になりがちなキーボードイベント
パソコンを使ってのキーボードイベントといえば、
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と同じ様なタイミングなのでしょうか？
以下のプログラムを実行して少し調べてみました。
var test = document.getElementsByName("test");
if(test){
test[0].onkeydown = function(e){console.log("key-down : "+e.target.value)};
test[0].onkeyup = function(e){console.log("key-up : "+e.target.value)};
test[0].onkeypress = function(e){console.log("key-press : "+e.target.value)};
test[0].oninput = function(e){console.log("input : "+e.target.value)};
test[0].onTextInput = function(e){console.log("textInput : "+e.target.value)};
test[0].onfocus = function(e){console.log("focus : "+e.target.value)};
test[0].onblur = function(e){console.log("blur : "+e.target.value)};
}
このHTMLをブラウザで開いて、javascriptコンソールを見てみると以下のような返答が返ってきます。
focus :
key-down :
key-press :
input : a
key-up : a
blur : a
focus :
key-down :
key-press :
input : a
key-up : a
key-down : a
key-press : a
input : aa
key-up : aa
blur : aa
focus :
key-down :
input : ｓ
key-down : ｓ
input : し
key-up : し
key-up : し
key-down : し
input : しｎ
key-up : しｎ
key-down : しｎ
input : しん
key-up : しん
key-down : しん
input : しんｊ
key-up : しんｊ
key-down : しんｊ
input : しんじゅ
key-up : しんじゅ
key-down : しんじゅ
input : しんじゅｋ
key-down : しんじゅｋ
input : しんじゅく
key-up : しんじゅく
key-up : しんじゅく
key-down : しんじゅく
input : 新宿
key-up : 新宿
key-down : 新宿
input : 新宿
key-up : 新宿
blur : 新宿
たまにダブって2回発生しているkey-upと比べてinputイベントは安定しているように見えます。
そして、keyupとほぼ同じタイミングで同じ挙動をしている事もわかるので、非常に使い勝手はよさそうですね。
iOSで確認
上記確認プログラムをiOSで実行してみます。
focus :
key-down :
input : し
key-up : し
key-down : し
input : しん
key-up : しん
key-down : しん
input : しんし
key-up : しんし
key-down : しんし
input : しんじ
key-up : しんじ
key-down : しんじ
input : しんじゆ
key-up : しんじゆ
key-down : しんじゆ
input : しんじゅ
key-up : しんじゅ
key-down : しんじゅ
input : しんじゅく
key-up : しんじゅく
input : 新宿
input :
input : 新宿
blur : 新宿
inputが最後の方にブランクになっている瞬間があります。
これは、「完了」または「改行（決定）」をスマホで押した際に発生するようですね。
key-upは、最後の文字列が取得できていないので、この時点でトラブル発生することがよくわかりますね。
これからはinputイベントを使おうっと！！！！
ブラウザ適用情報
https://caniuse.com/#search=event%20input
0 件のコメント:
コメントを投稿