Como restringir o campo Telefone para aceitar apenas números

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

Usando um pequeno trecho de código, pode facilmente desativar a introdução de quaisquer caracteres de teclado, a menos que seja um número. Isto significa que, se tentassem digitar algo que não fossem números, o texto simplesmente não seria introduzido, desativando assim o campo até que um número fosse introduzido.

Criação do formulário

Primeiro, terá de criar um novo formulário e adicionar os seus campos. Se precisar de alguma ajuda na criação do seu formulário, consulte esta documentação.

Adicionar a classe CSS

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

Para adicionar uma classe CSS, selecione o campo de formulário Telefone que adicionou ao seu formulário e, no separador Avançadas, adicione numbersOnly às Classes CSS.

Restringir o campo de telefone apenas a números

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

Se precisar de ajuda para adicionar trechos ao seu site, reveja 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 trecho irá procurar automaticamente qualquer campo de formulário com a classe CSS numbersOnly e irá impedir a introdução de qualquer coisa que não seja a tecla 0-9.

E é tudo o que precisa para restringir o campo Telefone apenas a números! Gostaria de tornar o número de telefone dentro das notificações por e-mail um link? Dê uma vista de olhos ao 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

FAQ

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 num número de telefone, e falharão o envio do formulário se houver demasiados dígitos no campo.