JS は、モバイル Web 開発における携帯電話入力ボックスのポップアップの関連サンプル コードを解決します。

モバイル Web 開発と PC 側の違いは、携帯電話での入力がソフト キーボードであるため、入力があるとキーボードがポップアップし、ページ全体が表示されるという問題が発生することです。必然的に変化する。この問題を解決するにはどうすればよいでしょうか?以下では、Script House の編集者が、モバイル Web 開発で携帯電話の入力ボックスがポップアップする問題を解決するための JS を共有します

モバイル Web 開発では、PC 側との違いは、携帯電話での入力がソフトキーボードなので、問題が発生します。それは、入力があるとキーボードがポップアップし、ページ全体が必然的に変更されます

1。解決策は、ページを上げても背景が不十分な場合に、本文に背景画像を設定することです。

2. 下部にある固定レイアウトを使用します。この問題には 2 つの解決策があります

まず、ページがどの程度変更されるか、およびどの程度変更されるかを改善するページに対応する必要があります。上記のページスクロール、

$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})

$this.offset().topはinput要素の高さ、入力される入力の位置までウィンドウをスクロールします

two、修正を非表示にします要素を追加し、ページ入力が完了したら表示します

var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});

resize属性を使うと、携帯入力ボックスがポップアップしたときにページ画面が変形し、リサイズが実行されます。元の高さ 変更が発生すると、現在のページの高さを取得し、ページの高さが異なる場合は要素を非表示にします。

以上がJS は、モバイル Web 開発における携帯電話入力ボックスのポップアップの関連サンプル コードを解決します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。