前提・実現したいこと
現在スマホサイトのブラウザ下部にposition:fixedで常に表示させている要素があるのですが、
inputフォームへ入力する際キーボードが立ち上がるとfixedさせている要素がキーボードの真上に移動してきてしまいます。(androidにて確認)
そうするとinputにfixed要素が重なってしまい、スクロールすることはできても範囲が狭いのでユーザビリティがかなり悪い状態になります。
inputをタッチした時だけfixed要素を非表示にするか、キーボード上に移動してこないようにしたいです。
かなり調べましたが方法が見つけられませんでした;
よろしくおねがいします。
【追記】
皆様ご回答ありがとうございます。説明不足で申し訳ありません。htmlも追記しましたがこちらで足りていますでしょうか。
私はjavascriptは簡単なものなら検索してようやく実装できる程度の知識しかないので、頂いたご回答を今試させて頂いている最中です。解決まで時間がかかると思うのですがご容赦ください;
該当のソースコード
css
1.sp-cta { 2 width: 100%; 3 position: fixed; 4 bottom: 0; 5 z-index: 20000; 6}
html
1 2<input placeholder="キーワードを入力してください" class="hoge" name="keyword" type="text"> 3<button type="submit">検索</button> 4 5<div class="sp-cta"> 6 <ul> 7 <li>電話でお問合せ</li> 8 <li>メールでお問合せ</li> 9 </ul> 10</div>
回答3件
あなたの回答
tips
プレビュー