web-dev-qa-db-ja.com

iOS Safariでソフトキーボードが開いているときに、画面の下部に固定されたhtml要素を表示し続ける方法は？

Webページには、入力フィールドと、ウィンドウの下部に固定されたdivがあります（これらのCSSプロパティ：position:fixed;およびbottom:0;

私が話していることを示すためにコードペンを作成しました： https://codepen.io/anon/pen/xpQWbb/

Chrome on Androidは、ソフトキーボードが開いているときでもdivを表示し続けます：

enter image description here

ただし、iOSのSafariは固定要素の上にソフトキーボードを描画するようです。

enter image description here

（私はMacbookのiOSシミュレーターでテストしていることに言及する必要があります。私は動作するiPhoneを持っていないためです）

Chromeのように、ソフトキーボードが開いているときでも、iOS Safariが要素を表示したままにする方法はありますか？

htmlioscsssafarikeyboard
11
Andreyu

私は前にこれを経験しました。その時私がやったことは：

  1. キーボードを叩いたときにリスナーを作成します。
  2. キーボードを押すと、画面の高さ-キーボードの高さでWebViewの高さが変更されます。
  3. このトリックを実行するには、htmlが応答することを確認する必要があります。

IOS側にさらにコードを表示できます。興味があれば、私の回答を編集して、私のIOSコードを表示できます。ありがとうございます。

こんにちは。申し訳ありませんが、私は間違っていました。あなたが内部にwebviewを備えたアプリを作成していると思いました。それでもキーボードを聞いてこれをやりたいのなら、私はまだあなたのための回避策を持っています。完璧な方法ではないかもしれませんが、試してみたい場合はこれでうまくいくと思います。ここに私の提案：

  1. キーボードが上にあるときでも、Webページからリスナーを持つことができます。 jquery onkeyupまたはonfocusを使用して、テキストフィールドにリスナーを配置できます。
  2. 次に、入力がヒットしたときにキーボードが表示されます。
  3. 次に、Javaスクリプトに条件を作成して、画面を操作できます。

これがあなたに洞察の友達を与えることを願っています。 @Beaniieありがとうございます！.

こんにちはAndreyu！。はい、キーボードの高さを知ることはできません。WebViewの場合とは異なり、IOSコードを使用してキーボードの高さを知ることができます。別の方法があります。それほどスマートではありませんが、機能する可能性があります。 。画面サイズを取得し、IOSデバイス画面サイズの配列と比較できます。次に、IOSデバイスを介して調査することにより、キーボードの高さを絞り込みます。良いです。運の友達。

3
Bhimbim

ページ全体にposition:absoluteとheight:100%を使用してみてください。

システムがキーボードを表示すると、アプリのコンテンツの上にキーボードが配置されます。キーボードとオブジェクトの両方を管理する1つの方法は、それらをUIScrollView objectまたはUITableViewのようなそのサブクラスの1つに埋め込むことです。テキストフィールドのインライン編集がある場合、UITableViewControllerはテーブルビューのサイズと位置を自動的に変更することに注意してください。

キーボードが表示されたら、スクロールビューのコンテンツ領域をリセットし、目的のテキストオブジェクトを所定の位置にスクロールするだけです。したがって、UIKeyboardDidShowNotificationに応答して、ハンドラーメソッドは次のことを行います。

1.キーボードのサイズを取得します。

2.スクロールビューの下部コンテンツインセットをキーボードの高さで調整します。

3.対象のテキストフィールドをスクロールして表示します。

Apple開発者向けガイドラインで詳細を確認してください： https://developer.Apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

0
Elfin forest

いいえ、方法はありません。

キーボードはブラウザプロセスの一部ではなく、キーボードが開いたときにブラウザがそれを知る方法はありません。それが知っているのは、サイズが変更された場合、サイズが変更されることだけです。ブラウザ（またはキーボードを要求するその他のアプリ）のサイズを変更するか、単にキーボードをその上に描画するかは、OSの決定です。ここでも、ブラウザはそれを制御できず、いつ発生するかを判別するプログラム可能なメソッドもありません。

補足として、position:fixedモバイルデバイスの小さなメニューオープナー（および開いているときはおそらくメニュー自体）以外のもの。

0
tao

チェックアウト このスレッド 、それはコードの点でより実行可能かもしれない回避策について話します。簡単に言うと、キーボードの高さを使用してコンテンツを表示する方法について説明します。少しハックなものであっても、デバイス間でキーボードの正確な高さを特定するのは難しい場合があります。

残念ながら、IOs Safariキーボードの性質上、これはブラウザーのビューポートの一部ではないため、通常の要素のように参照することはできません。

@Bhimbimの答えも良いショットかもしれません。

よろしく、-B

0
Beaniie