Como Impedir que a Tecla Enter Envie o Formulário

Gostaria de impedir que a tecla Enter envie seus formulários? Existem muitos debates sobre se você deve ou não desativar essa tecla, mas se você fez sua pesquisa e determinou que é melhor para o seu site desativar essa tecla, este artigo lhe dará o código necessário para desativar a tecla Enter em seus formulários.

Desativando a tecla enter

Para desativar essa tecla em seus formulários, que incluem o botão de envio, botões de próxima/página anterior, bem como o uso da tecla enter para navegar pelos campos do formulário, basta copiar este código e adicioná-lo ao seu site.

Se precisar de ajuda sobre como e onde adicionar trechos ao seu site, por favor, confira este tutorial.

Precisamos colocar o número numérico que representa a tecla Enter em um teclado padrão. já sabemos que isso é representado pelo número 13. Se você quiser saber mais sobre esses números e o que eles representam, dê uma olhada nesta documentação.

Para um formulário específico do 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 );

O código acima está visando especificamente o ID do formulário wpforms-form-721. Você precisará alterar este código para corresponder ao seu próprio ID de formulário.

Se precisar de ajuda sobre onde encontrar o ID do seu formulário, por favor, revise este tutorial.

Para todos os formulários do WPForms

No entanto, se você quiser adicionar isso para todos os formulários do WPForms, use o código mostrado abaixo.

/**
 * 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 é tudo o que você precisa para desativar essa tecla. Gostaria também de alterar a cor do botão Enviar? Dê uma olhada em nosso tutorial sobre Como Alterar a Cor do Botão de Envio.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Como posso desativar o botão Próximo ao usar Quebras de Página?

R: Para desativar os botões Próximo e Anterior ao usar o campo Quebra de Página do WPForms, use este trecho.

/**
 * 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: E se eu quiser desativar a tecla Enter em todos os formulários do meu site?

R: Este trecho desativaria a tecla, independentemente de ser um formulário do WPForms ou o formulário de comentários do 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: Posso desativar as teclas de Espaço e Enter para enviar o formulário?

R: Com certeza! Apenas use este trecho em vez disso.

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