仮想キーボード、モバイル Web 開発の苦痛_html/css_WEB-ITnose

ネイティブ APP は仮想キーボードをポップアップ表示したり、仮想キーボードを格納したりし、入力ボックスは常に仮想キーボードの上に表示されます。以下に示すように:

モバイル Web にも同様の機能が必要な場合、実装できますか?

「ページの一番下に、position:fixed; の入力ボックスを置くだけじゃないの?何がそんなに難しいの?!」と思われるかもしれません

当時は私もそう思いました (⊙﹏⊙),でもそれは本当です そうですか？以下にいくつかのテスト結果を見てみましょう。

Android 4.2.1-qq ブラウザでのテスト結果は次のとおりです:

写真に示すように、入力ボックスがありません。 。 。

iOS の Safari を見てみましょう:

なぜまた帯下があるのでしょうか?

また、キーボードを閉じるとページが下に移動するのはなぜですか? 。 。

まあ、実際のところ、これは氷山の一角にすぎません。

本題に移りましょう。これらの問題をどのように解決できるでしょうか?

仮想キーボードから始めて、キーボードを吐き出すこととキーボードを引っ込めるという 2 つのイベントを監視できるかどうかを確認できます。

一部のブラウザは、サイズ変更イベントをキャプチャすることで仮想キーボードを閉じるかどうかを知ることができます。

テスト ページ: http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html

テスト結果は次のとおりです:

iPhone 5s iOS 8.2:

(n はサイズ変更イベントを意味します)はトリガーできません。y はサイズ変更イベントをトリガーできることを意味します)

注: iOS の UC ブラウザーでは、固定位置入力ボックスをクリックすると、キーボードを呼び出した後は入力できません。 では、フォーカスとブラーのイベントを監視する場合はどうでしょうか?

テスト ページ: http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html

上記 2 つのマシンでテストを続けると、結論は次のようになります:

ios とAndroid では、フレームをクリックして入力すると、フォーカス イベントがトリガーされます

iOS 上のすべてのブラウザは、仮想キーボードの「完了」キーをクリックするか、他の方法でキーボードを閉じると、ブラー イベントをトリガーします

Android フォンが「折りたたみボタン」をクリックすると、 」または他の操作を実行してキーボードを閉じると、blur イベントはトリガーされず、フォーカスは入力ボックス上にあります。

以下はテスト スクリーンショットです

したがって、次のソリューションを使用して Web コメント ボックスを作成できます

ページの例: http://backton a turedemo.github .io/frontend/case /keyborad/demo1.html

1. コメント ボックスを除くすべての要素は親要素に配置され、親要素が main になります。

1 <div class="main">2      <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test.png" alt="">3      <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test1.png" alt="">4 </div>

2. コメント ボックスと公開ボタンは div に配置されます

1 <div class="comment">2     <div class="buttons">3         <button class="sure cell">发表</button>4         <button class="cancel cell">取消</button>5     </div>6     <textarea class="input" placeholder="我来说两句"></textarea>7 </div>

注: キーボードを呼び出す前に、ページ スクロール バーの位置を記録する必要があります。

キーボードを呼び出した後、.main (コメントボックス以外の要素) を非表示にします。

入力ボックスを上げ、固定をキャンセルし、上マージンを追加します (公開ボタン用のスペースを残します)。

入力ボックスがぼやけている場合、または「キャンセル」をクリックすると、ページが復元されます。