Como Restringir o Campo de Telefone para Aceitar Apenas Números

Gostaria de restringir o campo Telefone para aceitar apenas números? Por padrão, os formatos de telefone Internacional e Inteligente permitirão que você insira letras, mas falharão na validação quando você sair do campo.

Usando um pequeno trecho de código, você pode facilmente desabilitar a entrada de quaisquer caracteres de teclado, a menos que seja um número. Isso significa que, se eles tentassem digitar qualquer coisa que não fossem números, o texto simplesmente não seria inserido, desabilitando assim o campo até que um número fosse inserido.

Criando o formulário

Primeiro, você precisará criar um novo formulário e adicionar seus campos. Se precisar de alguma ajuda para criar seu formulário, consulte esta documentação.

Adicionando a classe CSS

Em seguida, você precisará adicionar uma classe CSS ao campo de formulário Telefone. Sempre que um campo Telefone com esta classe for usado, ele aceitará apenas um valor numérico.

Para adicionar uma classe CSS, selecione o campo de formulário Telefone que você adicionou ao seu formulário e, na aba Avançado, adicione numbersOnly em Classes CSS.

Restringindo o campo de telefone apenas a números

Agora é hora de adicionar o snippet ao seu site que restringirá o campo a permitir apenas números.

Se precisar de ajuda para adicionar trechos ao seu site, revise este tutorial.

/**
 * Restrict the Phone Field to Only Accept Numbers.
 *
 * @link https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/
 */

function restrict_letters_in_phone_field( ) {
?>
	<script type="text/javascript">
		
		jQuery(document).ready(function () {    

			jQuery( '.numbersOnly' ).keypress(function (e) {   
 
				var charCode = (e.which) ? e.which : event.keyCode    
				if (String.fromCharCode(charCode).match(/[^0-9]/g))    
					return false;                        
			});    

		});   
 
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'restrict_letters_in_phone_field', 30 );

Este snippet procurará automaticamente por qualquer campo de formulário com a classe CSS numbersOnly e impedirá a entrada de qualquer coisa que não seja a tecla 0-9.

E é tudo o que você precisa para restringir o campo Telefone a apenas números! Gostaria de tornar o número de telefone dentro das notificações por e-mail um link? Dê uma olhada em nosso tutorial sobre Como Tornar Números de Telefone um Link em Notificações por E-mail.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Como posso limitar o número de dígitos que eles inserem?

R: Os formatos Inteligente e EUA para o campo de telefone já terão alguma validação para o número de dígitos inseridos em um número de telefone e falharão na submissão do formulário se houver muitos dígitos no campo.