Gostaria de desativar a tecla Enter em seus formulários? Há muitos debates sobre se você deve ou não desativar essa tecla, mas se você fez sua pesquisa e determinou que é melhor para seu site desativar essa tecla, este artigo fornecerá o código necessário para desativar a tecla Enter em seus formulários.
Desativar a tecla Enter
Para desativar essa tecla em seus formulários, que incluem o botão Enviar, os botões de página seguinte/anterior e 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 para saber como e onde adicionar snippets ao seu site, consulte este tutorial.
Observe que esse código não funcionará para Formulários de Conversação.
Precisamos colocar o número numérico que representa a tecla Enter em um teclado padrão. Já sabemos que ela é representada pelo número 13. Se 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á direcionado especificamente para o ID do formulário wpforms-form-721. Você precisará alterar esse código para corresponder ao seu próprio ID de formulário.
Se precisar de ajuda para saber onde encontrar o ID do formulário, consulte este tutorial.
Para todos os formulários WPForms
No entanto, se você quiser adicionar isso a todos os formulários 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 isso é tudo o que você precisa para desativar essa chave. Você também gostaria de alterar a cor do botão Enviar? Dê uma olhada em nosso tutorial sobre Como alterar a cor do botão Enviar.
Ação de referência
PERGUNTAS FREQUENTES
P: Como posso desativar o botão Next ao usar quebras de página?
R: Para desativar os botões Avançar e Anterior ao usar o campo Quebra de página do WPForms, use este 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 );
P: E se eu quiser desativar a tecla Enter em todos os formulários do meu site?
R: Esse snippet desativaria a chave independentemente de se tratar de um formulário WPForms ou do 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! Em vez disso, basta usar este 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 );