web-dev-qa-db-fra.com

Comment garder l'élément html fixe visible en bas de l'écran lorsque le clavier logiciel est ouvert sur iOS Safari?

Dans une page Web, j'ai un champ de saisie et un div qui sont fixés au bas de la fenêtre (avec ces propriétés CSS: position:fixed; et bottom:0;

J'ai fait un Codepen pour montrer de quoi je parle: https://codepen.io/anon/pen/xpQWbb/

Chrome sur Android garde la div visible même lorsque le clavier logiciel est ouvert:

 enter image description here

Cependant, Safari sur iOS semble dessiner le clavier logiciel sur l'élément fixe:

 enter image description here

(Je devrais mentionner que je teste sur le simulateur iOS sur mon Macbook, car je n'ai pas d'iPhone en état de marche)

Existe-t-il un moyen de faire en sorte que iOS Safari garde l'élément visible même lorsque le clavier logiciel est ouvert, comme le fait Chrome?

htmlioscsssafarikeyboard
10
Andreyu

j'ai vécu cela auparavant. Ce que j'ai fait à l'époque était: 

  1. Faire un auditeur lorsque le clavier est touché.
  2. Lorsque vous appuyez sur le clavier, redimensionnez la hauteur de la vue Web avec la hauteur de l'écran - hauteur du clavier.
  3. Pour faire cette astuce, vous devez vous assurer que votre HTML est réactif.

Je peux montrer plus de code dans le IOS, si vous êtes intéressé, je peux modifier ma réponse et vous montrer mon code IOS. Je vous remercie.

Bonjour encore une fois, désolé, je me suis trompé, je pensais que vous créiez des applications avec WebView à l'intérieur. Si vous voulez toujours le faire en écoutant le clavier, j'ai encore du travail pour vous. Ce n'est peut-être pas le moyen idéal, mais je crois que cela fonctionnera si vous voulez essayer. Voici ma suggestion: 

  1. Vous pouvez toujours avoir un auditeur depuis une page Web lorsque le clavier est activé. Vous pouvez mettre un auditeur sur votre champ de texte en jquery onkeyup ou onfocus.
  2. Vous saurez alors quand l’entrée est frappée et le clavier s’affichera.
  3. Vous pouvez ensuite créer une condition dans votre script Java pour manipuler votre écran.

J'espère que cela vous donnera un ami perspicace. @ Merci Beaniie!.

Bonjour Andreyu! Oui, correct, nous ne pouvons pas connaître la hauteur du clavier, mais pas comme dans WebView, je peux connaître la hauteur du clavier via le code IOS. J'ai un autre travail autour, pas si intelligent, mais pourrait fonctionner. Vous pouvez obtenir la taille de l'écran et la comparer au tableau de IOS taille de l'écran du périphérique. Ensuite, vous pouvez réduire la hauteur du clavier en sondant IOS périphériques. Bonne chance ami.

2
Bhimbim

Essayez d'utiliser position:absolute et height:100% pour toute la page.

Lorsque le système affiche le clavier, il le place au-dessus du contenu de l'application. L'une des façons de gérer le clavier et les objets consiste à les incorporer dans un UIScrollView object ou l'une de ses sous-classes, comme UITableView. Notez que UITableViewController redimensionne et repositionne automatiquement sa vue tabulaire lorsqu'il y a une modification en ligne des champs de texte.

Lorsque le clavier est affiché, il vous suffit de réinitialiser la zone de contenu de la vue de défilement et de faire défiler l'objet texte souhaité jusqu'à l'emplacement souhaité. Ainsi, en réponse à une UIKeyboardDidShowNotification, votre méthode de gestionnaire ferait ce qui suit:

1.Obtenez la taille du clavier.

2. Ajustez la partie inférieure du contenu de votre vue défilement en fonction de la hauteur du clavier.

3. Faites défiler le champ de texte cible dans la vue.

Consultez les instructions du développeur Apple pour en savoir plus: https://developer.Apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

0
Elfin forest

Non, il n'y a pas moyen. 

Le clavier ne fait pas partie du processus du navigateur et le navigateur n'a aucun moyen de savoir quand le clavier s'est ouvert. Tout ce qu'il sait, c'est qu'il est redimensionné, si c'est le cas. Le système d'exploitation a décidé de redimensionner le navigateur (ou toute autre application demandant le clavier) ou de dessiner simplement le clavier dessus. Encore une fois, le navigateur n'a aucun contrôle sur celui-ci et aucune méthode programmable ne permet de déterminer quand cela se produit. 

En passant, vous ne devriez pas utiliser position:fixed pour autre chose qu'un très petit ouvre-menu (et peut-être même pour le menu lorsqu'il est ouvert) sur des appareils mobiles.

0
Andrei Gheorghiu

Découvrez ce fil de discussion , il est question d’un moyen de contourner le problème qui pourrait être plus réalisable en termes de code. En bref, il est question d'utiliser la hauteur du clavier pour afficher le contenu. Que ce soit un peu hacky, il peut être difficile de déterminer la hauteur exacte du clavier sur tous les appareils.

Malheureusement, en raison de la nature du clavier IOs Safari, il ne fait pas partie de la fenêtre de visualisation du navigateur et ne peut donc pas être référencé comme vous le feriez avec des éléments typiques.

@ La réponse de Bhimbim est également un bon coup.

Cordialement, - B

0
Beaniie