IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Supprimer l'envoi du formulaire si appui sur la touche entrée


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    enseignant
    Inscrit en
    Avril 2015
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : enseignant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Avril 2015
    Messages : 15
    Points : 12
    Points
    12
    Par défaut Supprimer l'envoi du formulaire si appui sur la touche entrée
    Bonjour je suis débutant en PHP

    J'ai un formulaire qui envoie le formulaire si l'on touche à la touche entrée,

    Je voudrais que la touche entrée soit programmer pour quelle change pour le champ ou rubrique suivant(e) et non l'envoie du formulaire

    Merci

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    Septembre 2011
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Distribution

    Informations forums :
    Inscription : Septembre 2011
    Messages : 27
    Points : 27
    Points
    27
    Par défaut
    Il va falloir passer par un peu de JQuery ou au moins javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Mon input : <input type="text" id="truc" onkeyup="maFonction(event)">
    -----------------------------------------------

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <script>
    function maFonction(e) {
       if(e.keyCode == 13) { // KeyCode de la touche entrée
              alert('Touche entrée !'); 
     }
    }
    </script>
    --------------------
    OU
    ---------------------
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $('#truc').keyup(function(e) {
       if(e.keyCode == 13) { // KeyCode de la touche entrée
              alert('Touche entrée !'); 
     }
    });

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Pour compléter la réponse de solero007, je conseille plutôt l'évènement keydown que keyup, et il faut rajouter un e.preventDefault() pour annuler le déclenchement de l'action par défaut, ici la soumission du formulaire.

    Je rajouterai qu'annuler des actions standard au clavier est généralement mal vu des utilisateurs, voire très gênant en termes d'accessibilité pour ceux qui ont des déficiences visuelles ou moteur.
    One Web to rule them all

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Je suis d'accord avec Sylvain : l'envoi du formulaire avec la touche entrée est le comportement habituel de tout formulaire. Si tu changes ce comportement, tu surprends tes utilisateurs. En outre, pour passer au champ suivant, il y a déjà la touche tab.

    Si tu souhaites continuer sur cette voie, tu devras faire en sorte que tes utilisateurs soient prévenus du comportement inhabituel de ton formulaire. Mets un texte explicatif et fais en sorte qu'il soit clair, et si possible qu'il explique les raisons (et possiblement les avantages) de ton choix.



    J'ai essayé de mettre en œuvre rapidement une simulation de la touche tab pour passer au champ suivant, et c'est moins évident que ça en a l'air : on ne peut pas simplement dispatcher un évènement « appui sur la touche tab », car les évènements créés par script son marqués comme untrusted et ne déclenchent pas le comportement par défaut associé.

    La seule solution que je vois, c'est de reproduire à la main le comportement de la touche tab, c'est-à-dire rechercher l'élément de formulaire suivant celui qui est actuellement sélectionné, et le sélectionner avec .focus(). Cette étape de recherche est le plus gros du travail : il faut tenir compte de la topologie du formulaire (les champs de formulaire sont rarement tous des enfants directs de la balise <form>).
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre à l'essai
    Homme Profil pro
    enseignant
    Inscrit en
    Avril 2015
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : enseignant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Avril 2015
    Messages : 15
    Points : 12
    Points
    12
    Par défaut Ou déposer le code
    Merci pour de ces réponses

    Je suis vraiment débutant en PHP,
    J'avoue que je ne ses pas trop ou déposer ces codes ?

    J'ai fait des essaie dans l'index PHP mais sa passe pas.

    Si quelqu'un veux bien m'aider ce ne serais pas de refus

    J'ai pris note que la suppression de l'envoie par la touche entrée n'est pas un comportement standard

    Merci

  6. #6
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Ce n'est pas du PHP, c'est du JavaScript exécuté côté client.

    solero007 t'a donné les deux éléments à utiliser: la balise <script> et l'attribut onkeydown sur l'élément HTML input de ton formulaire. Je t'invite à consulter notre FAQ pour en savoir plus sur l'intégration de JavaScript dans une page : http://javascript.developpez.com/faq...#ajouterScript
    One Web to rule them all

  7. #7
    Membre à l'essai
    Homme Profil pro
    enseignant
    Inscrit en
    Avril 2015
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : enseignant
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Avril 2015
    Messages : 15
    Points : 12
    Points
    12
    Par défaut OK
    Merci
    je regarde de plus pres

Discussions similaires

  1. Désactiver la touche entrée dans un formulaire
    Par Mat67 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 24/02/2013, 06h31
  2. Neutraliser la touche Entrée dans un formulaire
    Par laTayour dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 05/07/2010, 10h31
  3. modifier la touche [entrée] dans un formulaire
    Par troumad dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 05/12/2007, 17h21
  4. [HTML]Problème avec la touche "entrée" dans un formulaire
    Par WerKa dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 12/06/2007, 20h34
  5. Touche entrée sur double formulaire -> validation
    Par 10-nice dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 26/10/2005, 12h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo