Volete bloccare il tasto Invio nei vostri moduli? Ci sono molti dibattiti sull'opportunità o meno di disabilitare questo tasto, ma se avete fatto le vostre ricerche e avete stabilito che è meglio per il vostro sito disabilitare questo tasto, questo articolo vi fornirà il codice necessario per disabilitare il tasto Invio sui vostri moduli.
Disabilitazione del tasto di invio
Per disabilitare questo tasto sui vostri moduli, che includono il pulsante di invio, i pulsanti della pagina successiva/precedente e l'uso del tasto di invio per navigare tra i campi del modulo, basta copiare questo codice e aggiungerlo al vostro sito.
Se avete bisogno di assistenza su come e dove aggiungere gli snippet al vostro sito, consultate questo tutorial.
Si noti che questo codice non funziona per i moduli di conversazione.
Dobbiamo trovare il numero numerico che rappresenta il tasto Invio su una tastiera standard. Sappiamo già che è rappresentato dal numero 13. Se volete saperne di più su questi numeri e su ciò che rappresentano, date 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 di cui sopra si rivolge specificamente all'ID del modulo wpforms-form-721. È necessario modificare il codice per adattarlo all'ID del proprio modulo.
Se avete bisogno di aiuto per trovare l'ID del vostro modulo, consultate questa guida.
Per tutti i moduli WPForms
Tuttavia, se si desidera aggiungere questa funzione a tutti i moduli di WPForms, utilizzare 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 );
È tutto ciò che serve per disabilitare questo tasto. Volete cambiare anche il colore del pulsante Invia? Date un'occhiata alla nostra guida su Come cambiare il colore del pulsante Invia.
Azione di riferimento
FAQ
D: Come posso disabilitare il pulsante Avanti quando si utilizzano le interruzioni di pagina?
R: Per disabilitare i pulsanti Avanti e Precedente quando si usa il campo Interruzione di pagina di WPForms, usare 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: E se volessi disabilitare il tasto Invio su tutti i moduli del mio sito?
R: Questo snippet disabilita la chiave indipendentemente dal fatto che si tratti di un modulo WPForms o del modulo dei 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 i tasti Spazio e Invio dall'invio del modulo?
R: Assolutamente sì! Utilizzate invece 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 );