入力メソッドによって入力ボックスがブロックされる問題を解決する
Jun 19, 2018 pm 05:10 PM以下に、モバイル Web ページの入力メソッドによって入力ボックスがブロックされる問題を完全に解決する記事を共有します。これは良い参考値であり、皆さんに役立つことを願っています。
情報を入力するためにポップアップダイアログボックスを作成していましたが、携帯電話で表示すると、後の入力ボックスに情報を入力すると、入力メソッドによって入力ボックスがブロックされてしまうことがわかりました。そして盲目的にそれを埋めることしかできませんでした。 premise1
(dlg-top と dlg-bottom はダイアログ ボックスのクラスであり、ダイアログ ボックスの配置方法を決定するために使用されます) .dlg-top{
position: fixed;
top:100px;
left:10%;
}
.dlg-bottom{
position: fixed;
bottom:0px;
left:10%;
}
"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 サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Windows 11システムで入力方法を入力するときに候補単語ボックスが表示されない問題の解決方法

Xiaomi 携帯電話の入力方法を変更する場所_Xiaomi 携帯電話の入力方法を設定する手順

Win10システムで入力方式を切り替えるときに遅延が発生する問題を解決する方法

Win10 インプット メソッド アイコンが見つからない場合はどうすればよいですか? Win10 インプット メソッド アイコンが失われた後にそれを取得する方法は?

win11の入力方法で単語選択ボックスが表示されない問題を解決するにはどうすればよいですか?
