Que dois-je faire si la zone de saisie sur la page Web mobile est bloquée par la méthode de saisie ?

Que dois-je faire si la zone de saisie sur la page Web mobile est bloquée par la méthode de saisie ? Ci-dessous, l'éditeur partagera 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. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider 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 de la pensée

Pour le dire il s'agit simplement de changer la méthode de positionnement de la boîte de dialogue. Dans la situation 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.

Recommandations associées :

Comment js résout le problème du clavier logiciel bloquant la zone de saisie

L'entrée apparaît lorsque H5 crée un clavier virtuel Que faire si le cadre est bloqué ?

La solution à p étant toujours bloquée par l'échange select_Experience

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!