BLOG

ブログ
  • 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;
}

こんな感じでバーチャルキーボードが立ち上がっている時だけ最下部の要素を非表示にしてあげると便利です。