JS résout l'exemple de code pertinent de la boîte de saisie contextuelle du téléphone mobile dans le développement du Web mobile

La différence entre le développement Web mobile et le côté PC est que la saisie sur le téléphone mobile est un clavier logiciel, il y aura donc un problème, c'est-à-dire que lorsqu'il y a une saisie, le clavier apparaîtra et l'ensemble la page changera inévitablement. Comment résoudre ce problème ? Ci-dessous, l'éditeur de Script House partagera avec vous JS pour résoudre le problème de la zone de saisie du téléphone mobile qui apparaît dans le développement Web mobile

La différence entre le développement Web mobile et le côté PC est que la saisie sur le le téléphone portable est un clavier logiciel, donc il y aura un Le problème est que lorsqu'il y a une saisie, le clavier apparaît et la page entière changera inévitablement

1. Lorsque l'arrière-plan de la page est amélioré, il ne suffira pas.

La solution est dans le corps. Définissez l'image d'arrière-plan Même si la page est surélevée, l'arrière-plan existera toujours

2. Utilisez une mise en page fixe en bas. 🎜>

Ce problème entraînera le relèvement de la page et le correctif en bas en conséquence, couvrant le correspondant. Il existe deux solutions pour cela

Premièrement, la page devrait être amélioré en conséquence. Dans quelle mesure la page change-t-on laisser défiler la page ci-dessus,

$('input').bind('click',function(e){
  var $this = $(this);
  e.preventDefault();
  setTimeout(function(){
    $(window).scrollTop($this.offset().top - 10);
  },200)
})

$this.offset().top est la hauteur de l'élément d'entrée, faites défiler la fenêtre jusqu'à la position de l'entrée à saisir

2 Masquez l'élément fixe puis affichez-le lorsque la saisie de la page est terminée

Utilisez l'attribut de redimensionnement lorsque la zone de saisie du téléphone mobile apparaît. L'écran de la page se déformera et le redimensionnement sera exécuté. hauteur d'origine. Lorsqu'il y a un changement, nous obtenons la hauteur actuelle de la page. Lorsque la hauteur de la page est différente, nous masquons l'élément.

var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});

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!