- Web制作
スマホのバーチャルキーボードが立ち上がった時に、最下部に固定した要素が画面を邪魔してしまう
スマホサイトのユーザビリティについて。
スマホ用レイアウト時に、お問い合わせボタンなどを最下部に固定して配置することがよくあります。
最下部に配置すると片手で操作していても親指で押しやすいからですね。
ただ、フォーム入力時など iPhone だとバーチャルキーボードが下からせり上がってきます。
この時に最下部に固定したお問い合わせボタンもキーボードに合わせて、せり上がって来てしまい、入力欄を隠してしまうことがあります。
すごく邪魔ですね。
フォーム入力時に誤ってお問い合わせボタンを押してしまい、別ページに遷移してしまう場合もあります。
そこで、キーボードが立ち上がった時には最下部に固定したボタン類を非表示にしたい。
そんな時に有効です。
バーチャルキーボードが立ち上がった時に <body> にクラスを追加します。
《js》
$("input, textarea").focus(function(){ $(document.body).addClass('keyboard-active'); });
$("input, textarea").blur( function(){ $(document.body).removeClass('keyboard-active'); });
《css》
.keyboard-active .contact{
display:none;
}
こんな感じでバーチャルキーボードが立ち上がっている時だけ最下部の要素を非表示にしてあげると便利です。
名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。
