Prefácio
Recentemente, o produto precisa fazer muitas caixas de entrada. O efeito interativo que o produto deseja é: o usuário pode entrar em chinês e inglês e, à medida que a entrada do usuário entra, o número de caracteres que foram inseridos pode ser exibido em tempo real. Quando o limite de quantidade excede o limite, a borda da caixa de entrada fica vermelha e o usuário é solicitado para obter informações.
Essa interação parece sem problemas e parece não haver dificuldade na implementação técnica. Mas quando percebi, encontrei o método de entrada chinês e descobri que havia armadilhas.
Que truque, vamos ver abaixo ~~
Monitoramento em tempo real do comprimento do conteúdo da caixa de entrada, o poço encontrado é usado para monitorar oninput .
Existem 2 benefícios de usar este evento oninput :
Quando o usuário altera o conteúdo da caixa de entrada clicando com o botão direito do mouse, ele pode ser ouvido;
Este evento será acionado apenas quando o conteúdo da caixa de entrada for alterado. Por exemplo, este evento não será acionado quando o usuário pressionar as teclas de caracteres de controle, como as teclas de seta, control / shift , etc.;
O efeito é perfeito quando você entra nos caracteres ou números em inglês e mesmo quando você正常输入中文. Mas quando você非正常输入中文ocorrerá um bug. Como é a entrada anormal? Veja a figura de exemplo a seguir:
Você viu isso? Nesse método de entrada chinês, o usuário não entrou no chinês que ele deseja entrar, mas acaba de entrar em alguns pinyin, mas input foi acionado, e o value da caixa de entrada ouvido é realmente d'd'd , não apenas os caracteres Pinyin, mas também os pontos separados. Se o comprimento do conteúdo da caixa de entrada for limitado a não mais que 5, no caso da captura de tela, o usuário será solicitado a字符长度超过限制！ . Obviamente, esses efeitos interativos não são o que o produto deseja.
Use eventos onkeydown / onkeypress / onkeyup para ouvir
A desvantagem desses eventos é que eles não podem ouvir o conteúdo de entrada copiado do clique com o botão direito do mouse, mas haverá o mesmo problema que input ?
I did a few experiments and found that keydown and keyup will encounter the same problems as input , but keypress does not have this problem, because in the Chinese input state, keypress will not trigger, not only will it not trigger during the process of entering the pinyin, but it will not trigger after you select the Chinese language you want to enter such as "right, right, right". Então, quando "à direita, à direita" é inserida, embora o limite do caractere seja excedido,字符长度超过限制！ Dicas para.
Uma solução de compromisso
Para monitorar a duração do conteúdo em tempo real e garantir que não haja bugs no método de entrada chinês, estou lutando há muito tempo e finalmente descobri que não posso fazê -lo! (Se algum herói for encontrado, por favor me diga ~~).
Portanto, no final, a experiência do usuário foi sacrificada e foi encontrado um compromisso: a caixa de entrada perdeu seu foco (ou seja, blur ) ou o usuário verificou apenas o comprimento do conteúdo quando a tecla de entrada foi inserida. Obviamente, se você achar que o conteúdo da caixa de entrada excede o limite, mantenha o cursor na caixa de entrada para facilitar a modificação do usuário.
Infelizmente,用户输入回车键时才进行内容长度的检测e as armadilhas que ele foi plantado antes.
Como detectar que a tecla Enter é inserida na caixa de entrada
De fato, essa é uma interação muito comum. Por exemplo, ao modificar o nome, ele suporta o usuário para entrar e salvar diretamente após a entrada do carro e, ao fazer login, ele suporta o usuário para inserir e fazer login diretamente após a entrada do carro. Mas a armadilha a ter cuidado é: **中文输入法下按回车键来输入英文字符** .
Exemplos do processo de pressionar a tecla Enter para inserir caracteres em inglês sob o método de entrada chinês:
Por exemplo, se eu quiser inserir a conta para fazer login, minha conta está em todo o inglês. Atualmente, estou no método de entrada chinês, mas estou com preguiça de mudar o método de entrada, então digitei diretamente minha conta (todos os caracteres em inglês). Nesse momento, o método de entrada do SOGOU me levou a uma grande série de chineses e, em seguida, pressionei Enter, e a caixa de entrada entrou nos caracteres em inglês que eu queria.
Nesse caso, embora o usuário tenha inserido a tecla Enter, o usuário pressionou a tecla Enter apenas para inserir caracteres em inglês sob o método de entrada chinês. Essa tecla Enter não é a tecla Enter que queremos monitorar. Então, como descartar a tecla Enter neste caso?
De um modo geral, ao ouvir a tecla Enter, usaremos keydown ou keyup , e o código de implementação é o seguinte. Então, os dois métodos podem filtrar as teclas Enter que não queremos ouvir?
// Método 1: Use o KeyDown Event input.onKeydown = function (e) {if (e.KeyCode == 13) {// O usuário entra o Operações Relacionadas a Key // DOS}} // Método 2: Use KeyUp Event.OnKeyUp na função (e) (e.KeyCode == 13) {// Após as experiências, verificou -se que o uso keydown pode filtrar com sucesso, mas o uso keyup não pode.
Então, vamos ver por quê?
Isso ocorre porque no evento keydown : a chave da chave inserida no estado do método de entrada chinês, o keyCode detectado é 229 em vez de 13 ; Ao simplesmente entrar em um retorno, keyCode é 13 .
No evento keyup : keyCode detectado pela entrada da tecla Enter no estado do método de entrada chinês é 13 ; Ao simplesmente entrar em um Enter, keyCode também é 13 .
A figura a seguir é o resultado que imprimi no console: (veja aqui o exemplo de código)
Conclusão
Vários eventos envolvidos na caixa de entrada: keydown/keyup/keypress/input/alteração
Veja aqui: //www.vevb.com/article/21237.htm