Cómo evitar que la tecla Intro envíe el formulario

¿Le gustaría evitar que la tecla Intro envíe sus formularios? Hay muchos debates sobre si debería o no deshabilitar esta tecla, pero si ha investigado y ha determinado que es mejor para su sitio deshabilitarla, este artículo le proporcionará el código necesario para deshabilitar la tecla Intro en sus formularios.

Deshabilitar la tecla Intro

Para deshabilitar esta tecla en sus formularios, que incluyen el botón de envío, los botones de página siguiente/anterior, así como el uso de la tecla Intro para navegar por los campos del formulario, simplemente copie este código y añádalo a su sitio.

Si necesita ayuda sobre cómo y dónde añadir fragmentos a su sitio, consulte este tutorial.

Necesitamos colocar 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 desea obtener más información sobre estos números y lo que representan, eche un vistazo a esta documentación.

Para un formulario específico de WPForms

/**
 * 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 se dirige específicamente al ID del formulario wpforms-form-721. Deberá cambiar este código para que coincida con el ID de su propio formulario.

Si necesita ayuda sobre dónde encontrar el ID de su formulario, revise este tutorial.

Para todos los formularios de WPForms

Sin embargo, si desea añadir esto para todos los formularios de 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 necesita para deshabilitar esta tecla. ¿Le gustaría también cambiar el color del botón Enviar? Consulte nuestro tutorial sobre Cómo cambiar el color del botón de envío.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Cómo puedo deshabilitar el botón Siguiente cuando uso saltos de página?

R: Para deshabilitar los botones Siguiente y Anterior cuando utilice el campo Salto de página de WPForms, utilice 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: ¿Qué pasa si quiero deshabilitar la tecla Intro en todos los formularios de mi sitio?

R: Este fragmento deshabilitaría la tecla independientemente de si se trata de un formulario de WPForms o del 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 deshabilitar las teclas Espacio e Intro para enviar el formulario?

R: ¡Absolutamente! Simplemente use 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 );