Na semana passada recebi uma ligação do meu banco referente a uma transferência bancária que acabei de marcar. O cara do suporte ao cliente me fez repetir tudo de volta para ele porque parecia haver um problema com a informação. “Hmmmm, tudo o que você disse está certo, exceto os três últimos dígitos do número da conta.”
Ele me fez reapresentar o formulário de transferência. Quando saí do campo do número da conta, o canto do meu olho notou a alteração do número da conta um pouco. Eu rapidamente me concentrei no campo e levantei levemente meu dedo indicador no meu Mouse Mágico . Começou a parecer mais uma slot machine do que um campo de entrada!
Acontece que eles estão usando o campo de entrada do número datype="number" conta , o que altera o comportamento do campo:
O navegador pode optar por fornecer setas de passo para permitir que o usuário aumente e diminua o valor usando o mouse ou simplesmente tocando com a ponta do dedo.
Nesse caso, um movimento para cima ou para baixo do meu dedo no meu mouse ou o movimento das setas do teclado para cima / baixo altera o número da conta! Não é exatamente o que alguém quer. Certamente não para números de conta, números de segurança social, números de cartão de crédito, números de confirmação e outros.
Uma e outra vez, parece que alcançar input type="number"é uma boa ideia, mas quase sempre não é. Enquanto input type="numberdesencadeia teclados numéricos em touchscreens levando a melhor UX móvel, que também pode ser realizado configurando o patternatributo de uma certa maneira ( Zach Leatherman tem um ótimo post mergulho profundo em tudo isso ). Eu também direi que incrementar / decrementar um número com a roda de rolagem de um mouse (especialmente o maldito Magic Mouse) é um péssimo padrão mesmo para uma entrada numérica adequada (“droga! Eu queria comprar dois pares de meias, não 39”).
Expliquei a situação para o serviço ao cliente do meu banco e ele pareceu entender. “Oooohh, então coisas como números de conta e números de seguridade social não são realmente ‘números’”. Você entendeu, cara. Ele disse que vai passar para a equipe da web, e espero que eles ajam com isso!