Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como colocar só números no campo telefone e limitar caracteres na mensagem?

Como colocar só números no campo telefone e limitar caracteres na mensagem?

alguem pode ajudar?

1 resposta
solução!

Ei, Giuliano! Tudo bem?

Para delimitarmos apenas números no campo de telefone, podemos usar dentro da tag input o evento onekeypress. Ele permite chamar uma função quando o usuário pressiona uma tecla. O comando está escrito abaixo:

onkeypress="return event.charCode >= 48 && event.charCode <= 57"

Dito isso, agora vamos entender cada uma das partes desse evento!

  • return finaliza a execução de uma função e especifica os valores que devem ser retornados para onde a função foi chamada.
  • event.charCode >=48 e event.charCode<=57 obtém o valor da tecla do teclado pressionado, que neste caso representa o conjunto das teclas numéricas (0 a 9).
  • && é operador lógico and, que no português podemos traduzir como "e". Ele representa um conjunto lógico que precisa ser respeitado para que o valor retornado seja verdadeiro.

Conhecendo cada uma das partes desse evento, podemos inferir que quando apenas as teclas numéricas forem pressionadas o valor será digitado no campo especificado.

O código completo está abaixo:

<label for="radio-telefone" class="texto">
<input type="tel" name=contato value="telefone" id="radio-telefone" onkeypress="return event.charCode >= 48 && event.charCode <= 57">Telefone</label>

Já para limitar o uso de caracteres em um campo de preenchimento, podemos usar o atributo maxlenght que informa o número máximo de caracteres num campo de preenchimento dentro da tag <input> . O comando seria feito da seguinte maneira:

maxlenght="número máximo de caracteres"

Por exemplo se quisermos que o número máximo de caracteres em um campo de mensagem seja de 200, o comando seria escrito assim:

maxlenght="200"

O código completo está abaixo:

<label for="mensagem" class="bold">Mensagem</label>
<textarea cols="55" rows="10" id="mensagem" class="input-padrao" maxlength="200" required ></textarea>

Caso tenha outras dúvidas, estou disponível para te auxiliar.

Abraços e bons estudos! :)

Caso este post tenha lhe ajudado, favor marcar como solucionado. ✓

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software