モバイル Web ページの入力ボックスが入力メソッドによってブロックされている場合はどうすればよいですか?

モバイル Web ページの入力ボックスが入力メソッドによってブロックされている場合はどうすればよいですか?以下に、編集者が、モバイル 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 でソフト キーボードが入力ボックスをブロックする問題を解決する方法 H5 で仮想キーボードを作成するときに入力ボックスがブロックされた場合はどうすればよいですか?

pは常に選択ソリューションによってブロックされています_体験交換

以上がモバイル Web ページの入力ボックスが入力メソッドによってブロックされている場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。