Formulários

Máscara de entrada

Input mask

Orienta a apresentação de um valor enquanto a pessoa digita.

Telefone

(85) 9 1234-5678

Apresentação de exemplo · dados fictícios

Exemplo didático · Representação visual do padrão

Quando usar

Formatar telefones e documentos sem exigir que a pessoa digite toda a pontuação.

Cuidados e acessibilidade

Permita colar e editar. Formatação não prova que o valor é válido.

Partes e comportamento

Valor digitado, caracteres de formatação e regras de edição.

Não confunda

Máscara formata a entrada; validação verifica regras. Uma não substitui a outra.

Exemplo de código

<label for="telefone">Telefone com DDD</label>
<input type="tel" id="telefone" autocomplete="tel"
  aria-describedby="ajuda-telefone">
<p id="ajuda-telefone">Exemplo: (85) 91234-5678.</p>
<!-- A máscara e a validação são comportamentos separados. -->

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Máscara de entrada (Input mask) em português do Brasil. Orienta a apresentação de um valor enquanto a pessoa digita. Contexto de uso: Formatar telefones e documentos sem exigir que a pessoa digite toda a pontuação. Estrutura: Valor digitado, caracteres de formatação e regras de edição. Referência técnica: inputmode="numeric". Requisito: Permita colar e editar. Formatação não prova que o valor é válido. Considere também: Máscara formata a entrada; validação verifica regras. Uma não substitui a outra. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗