web-dev-qa-db-fra.com

Comment puis-je empêcher le bouton Aller sur iPad/iPhone de poster le formulaire?

J'ai un formulaire dynamique qui doit être affiché à l'aide d'un iPad.

Ce formulaire contient deux boutons radio, des champs de texte et un bouton d'envoi.

Dans un iPad, le bouton GO du clavier virtuel est supposé agir sur la touche Entrée, ce qui entraîne le clic sur le premier bouton d'envoi du formulaire et son envoi.

Pour éviter les publications involontaires excessives avant que le formulaire ne soit terminé, nous avons ajouté un bouton de soumission supplémentaire plus haut dans le formulaire, placé absolument en dehors de la zone visible, avec onclick = "return false;". Cette opération détournera la touche de saisie pour éviter les accidents. publier dans tous les navigateurs sauf Safari Mobile.

Sur un iPad, nous avons même testé Opera mobile et il fonctionne comme prévu.

Mais Safari Mobile ignore apparemment le retour false car un événement cliqué sur le bouton entraîne la publication d’un message comme aucun autre navigateur, pas même Safari sur PC.

Mes questions sont

1: Pourquoi safari mobile ignore-t-il "return false" lors de l'envoi, y a-t-il un autre mécanisme en jeu ici?

2: Comment puis-je empêcher Safari mobile de publier le formulaire en cliquant sur GO?

J'ai effectué de nombreuses recherches sur Google et Stackoverflow et trouvé de nombreux exemples, mais tout cela nécessite beaucoup de javascript et de liaison d'événement. La nature dynamique du formulaire et le contenu généré par l'utilisateur rendent cette erreur sujette aux erreurs et assez complexe, car presque tous les événements de liaison obligatoires zone de texte et zone de texte.

Toute solution qui fonctionne est bonne, mais simple, mieux c'est, en particulier si elle ne nécessite pas une grande personnalisation du formulaire ou des événements susceptibles d'entrer en conflit avec des événements de saisie semi-automatique ou de validation.

Exemple de page de test: http://lab.dnet.nu/ipad.php

formsipadmobilesafarisubmit
20
David Mårtensson

J'ai trouvé une solution à mon problème.

La base du problème est que Safari mobile ignore onsubmit = "return false" sur les boutons, il ne fonctionne que sur les formulaires.

Définition de onsubmit = "return false;" sur le formulaire, créer un bouton normal (ne pas soumettre) et définir onclick = "form.submit ()".

Ex.

<form method="post" onsubmit="return false;">
    ... //Other fields here

    <input type="button" value="Send" onclick="form.submit();" />
</form>

Le bouton Atteindre ne déclenche pas un bouton normal, il ne soumet que des boutons. Étant donné que le formulaire a onsubmit="return false;", il ne sera pas publié.

Le bouton en revanche, lorsque vous cliquez dessus, déclenche la onclick="form.submit();" qui remplace la sous-soumission sur le formulaire.

Cette solution semble fonctionner dans n'importe quel navigateur de manière fiable.

29
David Mårtensson

La meilleure réponse est ceci. L'autre ne vous permet pas d'utiliser un bouton d'envoi normal. Cela attaque juste le bouton aller.

$("body").keydown(function(){
    if(event.keyCode == 13) {
        document.activeElement.blur();
        return false;
    }
});
7
Tim Ho

Cela semble très peu conventionnel, car cela casse fondamentalement l'UX et le comportement attendu du périphérique.

Cependant, je pense qu'il est également important de mentionner que cette solution repose sur l'élément DOM <form>. Cela signifie que le gestionnaire onclick sur le bouton ne doit pas utiliser d'objet jQuery à soumettre, mais l'élément DOM.

Objet jQuery. Ne fonctionne pas: 

<input type="button" value="Send" onclick="$("#myform").submit();" />

élément DOM. Fonctionne: 

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />

Sans jQuery. Fonctionne: 

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />

En outre, voici une approche similaire, utilisant jQuery pour intercepter les envois clavier et permettant uniquement les clics sur un bouton. Le mérite en revient à @levi: http://jsfiddle.net/RsKc7/

0
Patrik Affentranger

Je ne peux pas commenter, je dois donc mettre un nouveau message. 

La solution @David fonctionne bien si nous utilisons un "bouton de type d'entrée"; à la place, si nous utilisons une balise button ne semble pas être résolu par David fix . 

(env: cordova, ipad mini 2) 

Merci David!

0
Simone Campagna

Voici une réponse supplémentaire, au cas où quelqu'un finirait comme si je le faisais.

À condition que vous utilisiez jQuery, l'extrait de code suivant devrait empêcher le bouton "Aller" de déclencher la soumission d'un formulaire (du moins sur Chrome sur Android 4.2.2 de Nexus 7; YMMMV). Notez également que si vous souhaitez autoriser la touche "Entrée" à utiliser l'un des types d'entrée ci-dessous, cela empêchera que cela se produise.

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',     
    function (e) { 
        // Android maps the "Go" button to the Enter key => key code 13
        if (e.keyCode == 13) {
            return false; 
        }
    });

Édition: Il semble ce bogue casse keyup/keydown dans Chrome sous Android> 4.3, auquel cas ce correctif ne fonctionnera plus dans certaines circonstances.

0
ajm