Souhaitez-vous désactiver la touche Entrée sur vos formulaires ? La question de savoir si vous devez ou non désactiver cette touche fait l'objet de nombreux débats, 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ésactivation de la touche Entrée
Pour désactiver cette touche sur vos formulaires, qui comprennent 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, il suffit de copier ce code et de l'ajouter à votre site.
Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, consultez ce tutoriel.
Veuillez noter que ce code ne fonctionne pas pour les formulaires de conversation.
Nous devons placer le nombre numérique qui représente la touche Entrée sur un clavier standard. Nous savons déjà que cette touche est représentée par le nombre 13. Si vous souhaitez en savoir plus sur ces nombres 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 vise spécifiquement l'ID du formulaire wpforms-form-721. Vous devrez modifier ce code pour qu'il corresponde à l'ID de votre propre formulaire.
Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire, veuillez consulter ce tutoriel.
Pour tous les formulaires WPForms
Cependant, si vous souhaitez ajouter ceci pour tous les formulaires WPForms, utilisez le code 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 );
C'est tout ce dont vous avez besoin pour désactiver cette clé. Vous souhaitez également modifier la couleur du bouton Soumettre? Jetez un coup d'œil à notre tutoriel intitulé Comment modifier la couleur du bouton Soumettre.
Référence Action
FAQ
Q : Comment puis-je désactiver le bouton "Suivant" lorsque j'utilise les sauts de page ?
R : Pour désactiver les boutons Suivant et Précédent lors de l'utilisation du champ Saut de page de WPForms, utilisez ce snippet.
/**
* 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 clé, qu'il s'agisse d'un formulaire WPForms ou d'un formulaire de commentaire 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 empêcher les touches Espace et Entrée de soumettre le formulaire ?
R : Absolument ! Il suffit d'utiliser 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 );