Comment désactiver la touche Entrée pour soumettre le formulaire

Souhaitez-vous désactiver la touche Entrée sur vos formulaires ? Il existe de nombreux débats pour savoir si vous devriez ou non désactiver cette touche, mais si vous avez fait vos recherches et déterminé qu'il est préférable pour votre site de désactiver cette touche, cet article vous fournira le code nécessaire pour désactiver la touche Entrée sur vos formulaires.

Désactiver la touche entrée

Pour désactiver cette touche sur vos formulaires, qui incluent le bouton de soumission, les boutons de page suivante/précédente ainsi que l'utilisation de la touche entrée pour naviguer dans les champs du formulaire, copiez simplement ce code et ajoutez-le à votre site.

Si vous avez besoin d'aide sur comment et où ajouter des extraits à votre site, veuillez consulter ce tutoriel.

Nous devons placer le numéro qui représente la touche Entrée sur un clavier standard. nous savons déjà que cela est représenté par le numéro 13 si vous souhaitez en savoir plus sur ces numéros et ce qu'ils représentent, consultez cette documentation.

Pour un formulaire WPForms spécifique

/**
 * Disable the Enter key on a specific form 
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_specific_form( ) {
?>

    <script type="text/javascript">
        
        // Only run this snippet on the form ID 721
        jQuery( 'form#wpforms-form-721' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_specific_form', 30 );

Le code ci-dessus cible spécifiquement l'ID du formulaire wpforms-form-721. Vous devrez modifier ce code pour qu'il corresponde à votre propre ID de formulaire.

Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce tutoriel.

Pour tous les formulaires WPForms

Cependant, si vous souhaitez ajouter cela pour tous les formulaires WPForms, utilisez le code montré ci-dessous.

/**
 * Disable the Enter key WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_all_wpforms( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_all_wpforms', 30 );

Et c'est tout ce dont vous avez besoin pour désactiver cette touche. Souhaitez-vous également changer la couleur du bouton Soumettre ? Consultez notre tutoriel sur Comment changer la couleur du bouton Soumettre.

Action de référence

wpforms_wp_footer_end

FAQ

Q : Comment puis-je désactiver le bouton Suivant lorsque j'utilise des sauts de page ?

R : Pour désactiver les boutons Suivant et Précédent lorsque vous utilisez le champ Sauts de page de WPForms, utilisez cet extrait.

/**
 * Disable the enter key from going to the next page of a multi page form
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_stop_enter_submit_pagination( ) {
 ?>

<script type="text/javascript">
    jQuery(document)
        .off('keydown', '.wpforms-form input')
        .on('keydown', '.wpforms-form input', function(e) {
            if (e.keyCode === 13) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_stop_enter_submit_pagination', 30 );

Q : Que faire si je veux désactiver la touche Entrée sur tous les formulaires de mon site ?

R : Cet extrait désactiverait la touche, qu'il s'agisse d'un formulaire WPForms ou du formulaire de commentaires WordPress.

/**
 * Disable the enter key from submitting the form for all forms on this WordPress site
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_key_any_form( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wp_footer', 'wpf_dev_disable_enter_key_any_form', 30 );

Q : Puis-je désactiver les touches Espace et Entrée pour soumettre le formulaire ?

R : Absolument ! Utilisez simplement cet extrait à la place.

/**
 * Disable the Enter and Space key on all WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */
 
function wpf_dev_disable_enter_space_keys_all_wpforms( ) {
?>
 
    <script type="text/javascript">
         
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
			// 13 is to prevent the Enter key from submitting the form
			// 32 is to prevent the Space bar from submitting the form
            if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
				e.preventDefault();
				return false;
			}
        });
         
    </script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_space_keys_all_wpforms', 30 );