Javascript Fomulario que receba só texto

Castelhanothiaguinho · 16 de junho de 2020

Pessoal eu tenho ujma duvida , eu tenho um formulario em HTML e eu nao consigo fazer com que no campo nome, endereco, email,cidade e bairro receba apenas texto, se eu digitar um numero ex: 1,2,3,4 ele pega mais eu so que texto como eu faço , nao estou conseguindo alguem pode me ajudar..........

<html>
    <head>
        <meta charset="utf-8">
        <title>Minha primeira pagina em HTML e PHP</title>
        <link rel="stylesheet" type="text/css" href="Cadastro/cadastroStyle.css">
        <script>
            function mascarar_cpf(){
                var cpf = document.getElementById('cpf')
                if(cpf.value.length == 3 || cpf.value.length == 7){
                   cpf.value += "."
                }else if(cpf.value.length == 11){
                    cpf.value += "-"
                }
            }
            function teclaPermitida(){
                const tecla = (window.event) ? event.keyCode : event.which
                 if(tecla>=48 && tecla<=57 || tecla>=96 && tecla<=105 || tecla==8){
                   return true
                }else{
                    return false
                }
            }
        </script>
    </head>
    <body>
        <!-TOPO ->
        <div id="topo">
           <p class="bloco">Atibaia</p>
           <p class="send">[email protected]</p>
           <p class="tel">(11) 95981158</p>
        </div>
        <!-Menu->
        <div id="menu">
            <ul>
                <a href="Index.html">Home</a>
                <a href="cadastro.php">Cadastro</a>
                <a href="cuidador.php">Cuidador</a>
                <a href="Index.html">Tutorial</a>
            </ul>
            
            <p class="info">INFO COMPANY</p>
            <p class="rede">prestação e serviços</p>
        </div>
        <!-imagem->
        <div id="imagem">
            <form name="signs" method="post" action="cadastrando.php">
                Nome :<input type="text" name="nome" size="16" placeholder="Digite seu nome" required="required" maxlength="20"><br>
                Endereço :<input type="text" name="endereco" size="16" placeholder="Digite seu endereço" required="required" maxlength="20"><br>
                Email :<input type="text" name="email" size="16" placeholder="Digite seu email" required="required" maxlength="20"><br>
                Cidade :<input type="text" name="cidade" size="16" placeholder="Digite sua cidade" required="required" maxlength="20"><br>
                Bairro :<input type="text" name="bairro" size="16" placeholder="Digite seu bairro" required="required" maxlength="20"><br>
                CPF :<input type="text" id="cpf" name="cpf" size="16" autocomplete="off" placeholder="Digite seu cpf" required="required" maxlength="14" onkeydown="return teclaPermitida()" onkeypress="mascarar_cpf()"><br>
                <p class="Salvar">
                    <input type="submit" value="Cadastrar">
                </p>
                <div id="Cadastro">
                    <?php
                        if(isset($_GET['sucess'])){
                            echo "Gravado com sucesso";
                        }else{
                            echo "";
                        }
                    ?>
                </div>
            </form>
        </div>
    </body>
</html>

GabrielSennaMs · 16 de junho de 2020

@Castelhanothiaguinho Para fazer isso verificando a tecla digitada pelo usuário fica um pouco complicado devido as variação de teclados e o teclado virtual, nesse caso eu acho que a melhor maneira seria verificando o valor digitado pelo usuário.

Vamos mudar um pouco essa elemento Input que vai recebe o valor do CPF do usuário:

<input type="text" id="cpf" name="cpf" size="16" autocomplete="off" placeholder="Digite seu cpf" required="required" maxlength="14" oninput="teclaPermitida(this)">

O evento "oninput" é disparado sempre que o valor do Input é alterado, assim ele vai ser chamado sempre que o usuário tentar modificar o valor do Input.

Agora vamos modificar a função.

function teclaPermitida(input)
{
    input.value = input.value.replace(/\D/g, '');
}

A função "teclaPermitida" vai recebe como argumento o input e vai atribuir o valor desse input com o valor dele mesmo, só que ele vai filtrar tudo que não for número substituindo tudo que não for número por nada.

E pra só permitir letras é não números?

Basta alterar a expressão regular no método replace(substituir)

De: