Come impedire al tasto Invio di inviare il modulo

Vuoi impedire che il tasto Invio venga utilizzato nei tuoi moduli? Ci sono molti dibattiti se dovresti o non dovresti disabilitare questo tasto, ma se hai fatto le tue ricerche e hai determinato che è meglio per il tuo sito disabilitare questo tasto, questo articolo ti fornirà il codice necessario per disabilitare il tasto Invio nei tuoi moduli.

Disabilitare il tasto Invio

Per disabilitare questo tasto nei tuoi moduli, che includono il pulsante di invio, i pulsanti di pagina successiva/precedente, nonché l'uso del tasto Invio per navigare tra i campi del modulo, copia semplicemente questo codice e aggiungilo al tuo sito.

Se hai bisogno di assistenza su come e dove aggiungere snippet al tuo sito, dai un'occhiata a questo tutorial.

Dobbiamo inserire il numero numerico che rappresenta il tasto Invio su una tastiera standard. Sappiamo già che questo è rappresentato dal numero 13. Se desideri saperne di più su questi numeri e su cosa rappresentano, dai un'occhiata a questa documentazione.

Per un modulo WPForms specifico

/**
 * 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 );

Il codice sopra è mirato specificamente all'ID del modulo wpforms-form-721. Dovrai modificare questo codice per corrispondere al tuo ID modulo.

Se hai bisogno di aiuto su dove trovare il tuo ID modulo, ti preghiamo di consultare questo tutorial.

Per tutti i moduli WPForms

Tuttavia, se desideri aggiungerlo per tutti i moduli WPForms, utilizza il codice mostrato di seguito.

/**
 * 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 );

E questo è tutto ciò che ti serve per disabilitare questo tasto. Desideri anche cambiare il colore del pulsante Invia? Dai un'occhiata al nostro tutorial su Come cambiare il colore del pulsante Invia.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Come posso disabilitare il pulsante Avanti quando uso le interruzioni di pagina?

R: Per disabilitare i pulsanti Avanti e Indietro quando si utilizza il campo Interruzione di pagina di WPForms, utilizzare questo 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 );

D: Cosa succede se voglio disabilitare il tasto Invio su tutti i moduli del mio sito?

R: Questo snippet disabiliterebbe il tasto indipendentemente dal fatto che si tratti di un modulo WPForms o del modulo di commenti di 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 );

D: Posso disabilitare il tasto Spazio e Invio per l'invio del modulo?

R: Assolutamente! Usa semplicemente questo snippet.

/**
 * 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 );