入力メソッドによって入力ボックスがブロックされる問題を解決する

以下に、モバイル Web ページの入力メソッドによって入力ボックスがブロックされる問題を完全に解決する記事を共有します。これは良い参考値であり、皆さんに役立つことを願っています。

情報を入力するためにポップアップダイアログボックスを作成していましたが、携帯電話で表示すると、後の入力ボックスに情報を入力すると、入力メソッドによって入力ボックスがブロックされてしまうことがわかりました。そして盲目的にそれを埋めることしかできませんでした。 premise1

(dlg-top と dlg-bottom はダイアログ ボックスのクラスであり、ダイアログ ボックスの配置方法を決定するために使用されます)

.dlg-top{
 position: fixed;
 top:100px;
 left:10%;
}
.dlg-bottom{
 position: fixed;
 bottom:0px;
 left:10%;
}

js 部分

"deliver-dlg" は、ダイアログボックス

//弹出对话框时，绑定的事件
//绑定输入框获取焦点事件
$(".deliver-dlg input,.deliver-dlg textarea").focus(function(){
 var input=$(this);
 //在输入框获取焦点后，窗口改变的话，执行事件
 $(window).resize(function(){
  //判断当前输入框是否在可视窗口之外（下面）
  if($(window).height()-(input.offset().top+input.offset().height-document.body.scrollTop)<0){
   //对话框定位方式改为bottom
   $(".deliver-dlg").removeClass("dlg-top").addClass("dlg-bottom");
  }
  else{
   $(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
  }
 });
});
//取消对话框时，取消事件绑定
$(".deliver-dlg input").unbind();
$(".deliver-dlg").removeClass("dlg-bottom").addClass("dlg-top");
$(window).unbind();

思考分析

簡単に言うと、デフォルトでは上部を使用し、入力方法がある場合は下部を使用するというものです。 。 入力がフォーカスを取得し、ウィンドウがリセットされる (つまり、入力ボックスがポップアップする) 場合は、最初に入力のフォーカス イベントをバインドすることに注意してから、次にウィンドウ変更イベントをバインドします。これは、携帯電話では、入力がフォーカスを取得すると、入力ボックスがポップアップし、ウィンドウのサイズが変更されます。 ウィンドウ サイズ変更イベントが発生した後、入力ボックスがブロックされているかどうか (つまり、ウィンドウの可視範囲内にない) を判断するために使用される方法は、可視ウィンドウの高さ ($(window). height()) は、入力ボックスの底部 (input.offset().top+input.offset().height-document.body.scrollTop) より大きいかどうかを判断します。これは、input.offset().top が表すためです。ドキュメントの先頭からの要素の位置 要素の距離を計算するには ウィンドウの先頭の位置に応じて、スクロール バーがスクロールした量を減算できます。上記は、要素がビジュアル ウィンドウの下部にあるかどうかを判断するものです。 上記は私があなたのためにまとめたものです。

関連記事:

JSでボタンのクリックを拒否するマウス制御方法

JSを使って現在時差を取得する方法

jsでURLのオブジェクト管理を実装する方法

JavaScriptジェネレーターメソッドでの使用方法

以上が入力メソッドによって入力ボックスがブロックされる問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。