Résoudre le problème du blocage de la zone de saisie par la méthode de saisie

Ci-dessous, je partagerai avec vous un article qui résout parfaitement le problème du blocage de la zone de saisie par la méthode de saisie sur les pages Web mobiles. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Auparavant, je devais créer une boîte de dialogue contextuelle pour remplir les informations. J'ai constaté que lorsque je la visualisais sur mon téléphone portable, lorsque je remplissais les informations dans la zone de saisie ultérieure, la zone de saisie était. bloqué par la méthode de saisie et ne pouvait être rempli qu'à l'aveugle.

Prérequis

1. La boîte de dialogue contextuelle est positionnée avec display:fixed

2. la boîte de dialogue est corrigée

Solution

partie CSS

(dlg-top avec dlg-bottom est la classe de la boîte de dialogue, utilisée pour déterminer la méthode de positionnement de la boîte de dialogue)

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

partie js

"deliver- dlg" est la classe de la boîte de dialogue

//弹出对话框时，绑定的事件
//绑定输入框获取焦点事件
$(".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();

Analyse des idées

Pour le dire il s'agit simplement de changer la méthode de positionnement de la boîte de dialogue. Par défaut, utilisez top lorsqu'il existe une méthode de saisie, et utilisez bottom selon la situation. Lorsque l'entrée obtient le focus et que la fenêtre est réinitialisée (c'est-à-dire que la zone de saisie apparaît), faites d'abord attention à lier l'événement focus de l'entrée, puis liez l'événement de changement de fenêtre, car sur le téléphone mobile, c'est le entrée qui obtient le focus, et la zone de saisie apparaît, provoquant l'apparition de la fenêtre de changement de taille.

Après l'événement de changement de taille de la fenêtre, déterminez si la zone de saisie est bloquée (c'est-à-dire qu'elle ne se trouve pas dans la plage visible de la fenêtre. La méthode utilisée consiste à utiliser la hauteur de la fenêtre visible (). $(window).height() ) est supérieur au bas de la zone de saisie (input.offset().top+input.offset().height-document.body.scrollTop) car input.offset().top représente la position de l'élément à partir de l'en-tête du document, il doit calculer la position de l'élément à partir de l'en-tête de la fenêtre visuelle, puis soustraire le nombre de défilement de la barre de défilement. Ce qui précède consiste à déterminer si l'élément se trouve en bas de la fenêtre visuelle.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment contrôler la souris pour refuser de cliquer sur le bouton en JS

Comment obtenir le décalage horaire actuel en utilisant JS

Comment implémenter la gestion des objets de l'url en js

Comment utiliser la méthode Generator en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!