Eu vi que colocamos um placeholder nos inputs de e-mail e telefone. Como podemos fazer para que os dados que colocamos fiquem naquele mesmo formato?
Por ex.: o placeholder do telefone é (XX) XXXXX-XXXX. Porém na hora de escrever, os números aparecem como 11123456789. Seria mais prático se ele aparecesse como (11) 12345-6789
Obrigado!
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" class="inputpadrão" required placeholder="(XX) XXXXX-XXXX" >hoje, com a Alura e o Google Gemini
Oi, Joao, tudo bem?
Você adicionar um campo no input que utiliza um padrão de entrada pro campo, o pattern utilizando Regex. Caso ainda não conheça, regex ou expressão regular é uma forma de criar uma padrão de caracteres. Caso tenha interesse em estudar Expressão Regular, temos esse curso aqui.
No input, fica assim:
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" class="inputpadrão" pattern="[(][0-9]{2}[)] [0-9]{5}-[0-9]{4}" required placeholder="(XX) XXXXX-XXXX" >Aqui, a primeira parte da regex, é permitida a adição de dois caracteres dentro dos parênteses, mais cinco caracteres depois um travessão e mais quatro caracteres. O input só vai ser aceito se estiver nesse formato.