¿Le gustaría detener la tecla Intro en sus formularios? Hay muchos debates sobre si deberías o no deshabilitar esta tecla pero si has hecho tu investigación y has determinado que es mejor para tu sitio deshabilitar esta tecla, este artículo te dará el código necesario para deshabilitar la tecla Enter en tus formularios.
Desactivar la tecla intro
Para desactivar esta tecla en tus formularios, que incluyen el botón de enviar, los botones de página siguiente/anterior, así como el uso de la tecla intro para navegar por los campos del formulario, sólo tienes que copiar este código y añadirlo a tu sitio.
Si necesitas ayuda sobre cómo y dónde añadir snippets a tu sitio, consulta este tutorial.
Tenga en cuenta que este código no funcionará para los formularios conversacionales.
Necesitamos situar el número numérico que representa la tecla Intro en un teclado estándar. ya sabemos que está representado por el número 13 si quieres saber más sobre estos números y lo que representan, echa un vistazo a esta documentación.
Para un formulario WPForms específico
/**
* 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 );
El código anterior está dirigido específicamente al ID del formulario wpforms-form-721. Tendrá que cambiar este código para que coincida con su propio ID de formulario.
Si necesita ayuda para encontrar el ID de su formulario, consulte este tutorial.
Para todos los formularios WPForms
Sin embargo, si desea añadir esto para todos los formularios WPForms, utilice el código que se muestra a continuación.
/**
* 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 );
Y eso es todo lo que necesitas para desactivar esta tecla. ¿Quieres cambiar también el color del botón Enviar? Echa un vistazo a nuestro tutorial sobre Cómo cambiar el color del botón Enviar.
Acción de referencia
PREGUNTAS FRECUENTES
P: ¿Cómo puedo desactivar el botón Siguiente al utilizar saltos de página?
R: Para desactivar los botones Siguiente y Anterior al usar el campo Salto de Página de WPForms, use este fragmento.
/**
* 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 );
P: ¿Y si quiero desactivar la tecla Intro en todos los formularios de mi sitio?
R: Este snippet deshabilitaría la clave sin importar si es un formulario WPForms o el formulario de comentarios de 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 );
P: ¿Puedo desactivar las teclas Espacio e Intro para que no se envíe el formulario?
R: ¡Por supuesto! Utilice este fragmento en su lugar.
/**
* 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 );