質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

4903閲覧

スマホサイトでブラウザ下部にfixedさせている要素を、キーボード立ち上げ時に非表示にしたい

Mmarie

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2019/02/02 09:38

編集2019/02/05 08:39

前提・実現したいこと

現在スマホサイトのブラウザ下部に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>
s8_chu👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oikashinoa

2019/02/02 11:15

再現させる為のhtmlも書きたほうがいいですよ
Mmarie

2019/02/05 08:33

説明不足で大変申し訳ありませんでした。html追記しました。
guest

回答3

0

inputをタッチした時だけfixed要素を非表示にするか、キーボード上に移動してこないようにしたいです。

非表示にしたい対象要素に対してクラス名を付与してコントロールするのは如何でしょうか。
動くサンプル:https://jsfiddle.net/8x0mg4oa/3/

投稿2019/02/02 16:18

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mmarie

2019/02/05 08:36

ご回答ありがとうございます。いま頂いた方法を試しているところなのですが、うまく消えてくれません(+o+) inputのクラス名をhogeとして、以下のように記載したのですが何か間違っているでしょうか? <script> const $sp-cta = document.getElementsByClassName('sp-cta')[0]; const $hoge = document.getElementsByClassName('hoge')[0]; console.log($hoge); $hoge.addEventListener('click', () => { $sp-cta.classList.add('is-hidden'); }); </script> <style> .is-hidden{display:none;} </style>
退会済みユーザー

退会済みユーザー

2019/02/05 23:53

HTMLの記載もしていただくことは可能でしょうか。
退会済みユーザー

退会済みユーザー

2019/02/05 23:55

追記 constの変数名にはスネークケースは使用できません。 $sp-cta -> $spCta に変更するとどうでしょうか。
退会済みユーザー

退会済みユーザー

2019/02/05 23:57

失礼しました。 すでにhtmlの記載はありましたね。
Mmarie

2019/02/06 03:07

$sp-cta -> $spCtaにしたところinputクリックでfixedが消えるのは実現できました! ですが、残念ながら消えたままになってしまいました。 お早いご回答に感謝します。ありがとうございました。
退会済みユーザー

退会済みユーザー

2019/02/06 03:13

スネークケースは _ アンダースコアつなぎで ハイフンでつなぐ場合はスネークケースではなかったはず
退会済みユーザー

退会済みユーザー

2019/02/06 03:15

キャメルケース: 単語の区切りを大文字に スネークケース: 単語の区切りを _ アンダースコアに チェインケース: 単語の区切りを - ハイフンに
Mmarie

2019/02/06 03:23

私のはチェインケースだったということですね。いずれにせよキャメルケースにする必要があるんですね。
guest

0

ベストアンサー

jQueryを使えるなら以下の記述でいけると思います。

jQuery

1$(document).on('focus', 'input', function(){ 2 $('.sp-cta').hide(); 3}); 4$(document).on('blur', 'input', function(){ 5 $('.sp-cta').show(); 6});

スマホ以外の画面では違った動きをさせたい場合は画面サイズを取得して動作の仕方を振り分ける必要がありますが。

投稿2019/02/05 15:00

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mmarie

2019/02/06 03:07

ご回答ありがとうございました!こちらでやりたいことが実現できました。
guest

0

ここここは参考になりませんか?

投稿2019/02/02 11:51

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mmarie

2019/02/05 08:30

ご回答ありがとうございます。参考にさせて頂きます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問