ホームページ ウェブフロントエンド jsチュートリアル 入力メソッドによって入力ボックスがブロックされる問題を解決する

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

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%;
}
ログイン後にコピー
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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

Windows 11 で入力メソッドをタスクバーに固定する方法 Windows 11 で入力メソッドをタスクバーに固定する方法 Apr 14, 2024 pm 06:31 PM

Windows 11 で入力メソッドをタスクバーに固定する方法

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

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

Xiaomi 携帯電話の入力方法を変更する場所_Xiaomi 携帯電話の入力方法を設定する手順 Xiaomi 携帯電話の入力方法を変更する場所_Xiaomi 携帯電話の入力方法を設定する手順 Mar 25, 2024 pm 01:36 PM

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

Win11の入力方式フローティングウィンドウの非表示設定 Win11の入力方式フローティングウィンドウの非表示設定 Dec 30, 2023 pm 11:24 PM

Win11の入力方式フローティングウィンドウの非表示設定

Win10システムで入力方式を切り替えるときに遅延が発生する問題を解決する方法 Win10システムで入力方式を切り替えるときに遅延が発生する問題を解決する方法 Dec 25, 2023 pm 05:10 PM

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

Win10で不足している入力メソッドを表示する方法 Win10で不足している入力メソッドを表示する方法 Jul 04, 2023 pm 03:57 PM

Win10で不足している入力メソッドを表示する方法

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

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

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

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

See all articles