Olá Habr! Apresento a você a tradução do artigo
“Tudo o que você sempre quis saber sobre o modo de entrada” Christian Oliff.
Nota do tradutor: o título original do artigo "Tudo o que você sempre quis saber sobre o modo de entrada" foi alterado para "Recursos do atributo inputmode para SOs e navegadores móveis", pois o segundo transmite a essência com mais precisão.
O atributo global inputmode informa aos navegadores para dispositivos com teclado na tela qual opção mostrar quando o usuário seleciona um elemento de entrada ou área de texto.
<input type="text" inputmode="" /> <textarea inputmode="" />
Ao contrário de alterar o tipo do formulário, o modo de entrada não altera a maneira como o navegador interpreta a entrada - fornece instruções ao navegador sobre o teclado a ser exibido.
O atributo inputmode tem um longo histórico, mas apenas recentemente foi adotado pelos principais navegadores móveis: Safari para iOS e Chrome para Android. Anteriormente, ele foi implementado no Firefox para Android em 2012, mas mais tarde, após alguns meses, foi excluído (embora ainda esteja disponível através da bandeira). Depois de quase seis anos, o Chrome para Android construiu essa propriedade e, com a versão mais recente do iOS 12.2, o Safari também suporta.
O suporte a atributos do navegador pode ser visualizado
aqui . Os números indicam a versão do navegador.
Antes de entrarmos na linha de fundo, devemos ter em mente que o padrão de vida do WHATWG fornece documentação do modo de entrada, enquanto a especificação do W3C 5.2 não o contém mais. Como o WHATWG documenta o atributo e os navegadores estão trabalhando em seu suporte, consideraremos as características técnicas do WHATWG como padrão.
O modo de entrada aceita vários valores. Vamos olhar para eles um de cada vez.
#Nenhum
<input type="text" inputmode="none" />
Vamos começar com isso, porque talvez não precisemos de teclado. O uso de inputmode = ”none” não mostrará o teclado no Chrome para Android. O iOS 12.2 exibirá seu teclado alfanumérico por padrão; portanto, a característica nenhuma neste caso pode ser para o iOS algo como uma redefinição.
#Numeric
<input type="text" inputmode="numeric" />
Esse é provavelmente um dos valores mais comuns do modo de entrada, pois é ideal para campos de entrada que exigem apenas números - por exemplo, códigos PIN, CEP, números de cartão de crédito, etc. O uso de numeric com type = ”text” pode fazer mais sentido do que alternar a entrada para type = ”number” porque inputmode = ”numeric” pode ser usado com os atributos maxlength, minlength e pattern, tornando-o mais versátil para diferentes ocasiões.
Muitas vezes vi sites usando type = “tel” em idioma estrangeiro para exibir um teclado numérico. Isso é considerado uma solução alternativa, mas é semanticamente incorreto.
Lembre-se de que inputmode suporta o atributo pattern, podemos adicionar pattern = ”\ d *” para inserir o mesmo efeito. Use isso se tiver certeza de que a entrada deve permitir que apenas números sejam inseridos, porque o Android (diferente do iOS) não permite que o usuário acesse o teclado com letras, o que pode interferir acidentalmente na inserção de dados válidos.
#Tel
<input type="text" inputmode="tel" />
É difícil digitar um número de telefone usando o teclado alfanumérico padrão. No teclado do telefone, cada botão com um número (exceto 1 e 0) representa três letras (por exemplo, 2 representa A, B e C) localizadas na mesma tecla. O teclado alfanumérico não se refere a essas letras; portanto, a decodificação de um número de telefone contendo letras (por exemplo, 1-800-COLLECT) requer recursos adicionais.
O uso do modo de entrada com comutação para tel exibe um teclado de telefone padrão, incluindo botões para números de 0 a 9, sinais de cerquilha e asteriscos. Além disso, teremos caracteres mnemônicos alfabéticos (por exemplo, ABC).
#Decimal
<input type="text" inputmode="decimal" />
O campo inputmode com a mudança para decimal leva a pequenas alterações no iOS, onde o teclado parece igual ao do tel, mas os sinais + * # são substituídos por um ponto decimal. O Android usará apenas o teclado numérico.
#Email
<input type="text" inputmode="email" />
Tenho certeza de que você preencheu um formulário que exigia a introdução de um endereço de email, o que forçou o teclado a alternar apenas para acessar o símbolo @. Isso não é fatal, mas certamente não é muito conveniente. É aqui que o valor do email é útil. Ele adiciona o símbolo @ e o ponto decimal.
Esse teclado pode ser útil para quem precisa digitar um nome de usuário no Twitter, já que @ é o personagem principal para identificar usuários nessa rede social. Outro motivo para o uso pode ser se você tiver seu próprio script para verificar o email e não desejar usar a função de validação incorporada no navegador.
#URL
<input type="text" inputmode="url" />
Um valor de URL facilita a adição de uma extensão de nome de domínio (por exemplo, .com) pressionando um único botão; também existem botões que são comumente usados para endereços da web, por exemplo, os caracteres (.) e (/). A extensão mostrada no teclado é adicionada à entrada do usuário.
Esse teclado pode ser útil para mostrar aos usuários que seu campo de entrada aceita nomes de domínio (site.com), bem como endereços de domínio totalmente qualificados (https://site.com).
Use type = ”url” se o seu campo de entrada exigir validação dos caracteres digitados.
#Procurar
<input type="text" inputmode="search" />
Esse valor exibe o botão azul Ir no iOS e o verde Enter no Android, ambos no lugar de Retorno. Como você deve ter adivinhado pelo nome, a pesquisa é usada para formulários de pesquisa, fornecendo uma chave para produzir uma consulta.
Se você deseja mostrar a Pesquisa em vez de Entrar no iOS e o ícone da lupa no Android, em vez da seta verde, use o tipo = "pesquisa".
# O que mais você precisa saber
- Navegadores baseados no Chromium no Android, como Microsoft Edge, Brave e Opera, têm o mesmo comportamento do Chrome.
- Não toquei nos teclados do iPad por razões de brevidade. Eles são semelhantes ao iPhone, incluem apenas mais botões. O mesmo vale para tablets Android, com exceção dos teclados de terceiros, que podem ser um tópico separado que vale a pena destacar.
- Inicialmente, a especificação proposta tinha significados kana e katakana para a entrada japonesa, mas eles nunca foram implementados em nenhum navegador e, portanto, foram descontinuados.
- O nome latino também era originalmente um dos valores do modo de entrada e foi removido. Curiosamente, se você o usar agora no iOS Safari, ele exibirá o nome de usuário acima do teclado.