web-dev-qa-db-fra.com

Obtenir le bouton iPhone GO pour soumettre le formulaire

Est-ce que quelqu'un sait quelles variables vont dans un formulaire pour que le bouton GO du clavier virtuel de l'iPhones soumette le formulaire plutôt que non?

J'ai essayé de réduire les scénarios et voici ce que j'ai trouvé:

  • si FORM a un seul champ de saisie utilisateur, le bouton Aller soumet automatiquement le formulaire.

  • si FORM a plus d'un champ de saisie utilisateur, mais pas INPUT TYPE = "SUBMIT", le bouton GO ne soumet pas le formulaire.

  • si FORM a plus d'un champ de saisie utilisateur ET a un INPUT TYPE = "SUBMIT", alors le bouton Aller soumet le formulaire.

Cependant, ce n'est pas tout à fait exact, car nous nous trouvons dans une situation où le 3ème ne fonctionne pas pour nous. 

Est-ce que quelqu'un est au courant des autres facteurs qui entrent dans le bouton GO qui fonctionne ou non?

iphonehtmlformskeyboard
34
DA.

Donc, voici notre problème spécifique:

Nous avions un formulaire avec plusieurs champs de saisie utilisateur, mais pas un <input type="submit"> vrai (il était soumis via JS).

En tant que tel, le bouton GO n'a rien fait.

Nous avons ensuite ajouté un <input type="submit"> et le définir sur display: none en espérant que cela ferait l'affaire. Nan. N'a pas fonctionné.

Sur un coup de tête, nous avons changé d'affichage: aucun en margin-left: -1000px

Ça a marché!

Apparemment, Safari recherche la présence d’un bouton SUBMIT dans le formulaire et ne l’affiche que si aucun ne s’affiche: il sera déclenché lorsque vous appuierez sur le bouton GO.

47
DA.

S'il y a plus d'une entrée et que vous voulez masquer la soumission, le meilleur semble

<input type="submit" style="visibility:hidden;position:absolute"/>
21
Jiri Kopsa

Je ne pouvais pas comprendre pourquoi un formulaire Google Maps très simple ne soumettait pas à l'aide du bouton Aller de l'iPhone.

Il s'avère que, après l'avoir réduite, cela ne fonctionne pas avec target="_blank" sur la balise de formulaire.

Supprimé cela, et maintenant le bouton Go fonctionne sur iPhone. 

Voici un JSFiddle pour l'essayer

2
Nathan Todd

Vous pouvez également lier un écouteur à la touche à l'élément ou au formulaire. Le bouton "Go" de l'iphone est identique au bouton d'entrée d'un ordinateur, caractère 13. 

$('someElem').bind("keypress", function(e){
    // 'Go' key code is 13
    if (e.which === 13) {
       console.log("user pressed Go");
       // submit your form with explicit JS.
    } 
 });
1
David Merritt

Le code donné par les autres est correct . Si vous utilisez jQuery Mobile, ajoutez 

data-role="none"

à l'élément input submit. Ainsi:

<input type="submit" data-role="none" style="visibility: hidden; position: absolute;" />
1
Jonny Forney

Le simple fait de placer mon type d’entrée = 'recherche' dans une balise de formulaire a permis de résoudre le problème. J'espère que cela aidera également les autres personnes ayant ce problème.

0
Oz Lodriguez

Voici le style de bouton d'envoi qui a fonctionné pour moi, avec un minimum d'effets secondaires sur la page:

.... style="width: 0px ; height: 0px" ....
0
Bitonator