Prefacio
Recientemente, el producto necesita hacer muchos cuadros de entrada. El efecto interactivo que el producto desea es: el usuario puede ingresar chino e inglés, y a medida que entra la entrada del usuario, el número de caracteres que se han ingresado se puede mostrar en tiempo real. Cuando el límite de cantidad excede el límite, el borde del cuadro de entrada se vuelve rojo y se le solicita al usuario la información.
Esta interacción suena como ningún problema, y parece que no hay dificultad en la implementación técnica. Pero cuando me di cuenta, encontré el método de entrada chino y descubrí que había dificultades.
Qué truco, veamos a continuación ~~
Monitoreo en tiempo real de la longitud del contenido del cuadro de entrada, el PIT encontrado se usa para monitorear oninput .
Hay 2 beneficios de usar este evento oninput :
Cuando el usuario cambia el contenido del cuadro de entrada haciendo clic derecho, se le puede escuchar;
Este evento solo se activará cuando cambie el contenido del cuadro de entrada. Por ejemplo, este evento no se activará cuando el usuario presione las teclas de caracteres de control, como las teclas de flecha, control / shift , etc.;
El efecto es perfecto cuando ingresas a caracteres o números ingleses, e incluso cuando正常输入中文. Pero cuando非正常输入中文se producirá un error. ¿Cómo es la entrada anormal? Vea la siguiente imagen de ejemplo:
¿Lo has visto? En este método de entrada china, el usuario no ha ingresado a los chinos a los que quiere ingresar, pero acaba de ingresar algunos pinyin, pero input se activó, y el value la caja de entrada escuchado es en realidad d'd'd , no solo los caracteres pinyin, sino también los puntos separados. Si la longitud del contenido del cuadro de entrada se limita a no más de 5, entonces en el caso de la captura de pantalla, ¡se le pedirá al usuario que字符长度超过限制！ . Por supuesto, tales efectos interactivos no son lo que el producto quiere.
Use eventos onkeydown / onkeypress / onkeyup para escuchar
La desventaja de estos eventos es que no pueden escuchar el contenido de entrada copiado del clic derecho, pero ¿habrá el mismo problema que input ?
Hice algunos experimentos y descubrí que keydown y keyup encontrarán los mismos problemas que input , pero keypress no tiene este problema, porque en el estado de entrada chino, keypress no se activará, no solo se activará durante el proceso de ingresar el pinyin, sino que no activará después de seleccionar el idioma chino que desea ingresar como "correcto, correcto". Luego, cuando se ingresa "correcto, correcto, correcto", aunque se excede el límite de caracteres,字符长度超过限制！ Consejos para.
Una solución de compromiso
Para monitorear la duración del contenido en tiempo real y asegurarse de que no haya errores en el método de entrada china, he estado luchando durante mucho tiempo y finalmente descubrí que no puedo hacerlo. (Si se encuentra algún héroe, por favor dígame ~~).
Entonces, al final, se sacrificó la experiencia del usuario y se encontró un compromiso: el cuadro de entrada perdió su enfoque (es decir, blur ), o el usuario solo verificó la longitud de contenido cuando se ingresó la clave de entrada. Por supuesto, si encuentra que el contenido del cuadro de entrada excede el límite, debe mantener el cursor en el cuadro de entrada para facilitar la modificación del usuario.
Por desgracia,用户输入回车键时才进行内容长度的检测y las trampas que se ha plantado antes.
Cómo detectar que la tecla ENTER se ingresa en el cuadro de entrada
De hecho, esta es una interacción muy común. Por ejemplo, al modificar el nombre, admite al usuario que ingrese y guarde directamente después de ingresar el carro, y al iniciar sesión, admite al usuario que ingrese e inicie sesión directamente después de ingresar el carro. Pero la tritura para tener cuidado es: **中文输入法下按回车键来输入英文字符** .
Ejemplos del proceso de presionar la tecla Ingrese para ingresar caracteres en inglés bajo el método de entrada china:
Por ejemplo, si quiero ingresar a la cuenta para iniciar sesión, mi cuenta está en todo el inglés. Actualmente estoy en el método de entrada china, pero soy demasiado vago para cambiar el método de entrada, por lo que escribí directamente mi cuenta (todos los caracteres ingleses). En este momento, el método de entrada de Sogou me impulsó una gran cadena de chino, y luego presioné Enter, y el cuadro de entrada ingresó a los caracteres ingleses que quería.
En este caso, aunque el usuario ingresó a la tecla Ingrese, el usuario presionó la tecla Intro solo para ingresar caracteres en inglés bajo el método de entrada china. Esta tecla ENTER no es la clave ENTER que queremos monitorear. Entonces, ¿cómo descartar la clave ENTER en este caso?
En términos generales, al escuchar la tecla ENTER, usaremos keydown o keyup , y el código de implementación es el siguiente. Entonces, ¿pueden ambos métodos filtrar las teclas Enter que no queremos escuchar?
//Method 1: Use keydown event input.onkeydown = function(e){ if(e.keyCode == 13){ //The user inputs the Enter key//dos related operations}}//Method 2: Use keyup event input.onkeyup = function(e){ if(e.keyCode == 13){ //The user inputs the Enter key//dos related operations}} Después de los experimentos, se descubrió que el uso keydown puede filtrarse con éxito, pero el uso de keyup no puede.
Entonces, veamos por qué?
Esto se debe a que en el evento keydown : la clave Ingreso de clave ingresada en el estado del método de entrada chino, el keyCode detectado es 229 en lugar de 13 ; Al simplemente ingresar una devolución, keyCode es 13 .
En el evento keyup : keyCode detectado al ingresar la tecla ENTER en el estado del método de entrada chino es 13 ; Al simplemente ingresar a una entrada, keyCode también es 13 .
La siguiente figura es el resultado que imprimí en la consola: (ver aquí para ver el ejemplo del código)
Conclusión
Varios eventos involucrados en el cuadro de entrada: Keydown/Keyup/KeyPress/Input/Change
Ver aquí: //www.vevb.com/article/21237.htm