Explicación detallada de cómo solucionar el problema de que la interfaz no vuelve a la posición original cuando el teclado IOS se retrae mediante el evento focusout

Hoy, al desarrollar una página móvil H5, me encontré con el problema de que la interfaz no puede volver a su posición original cuando el teclado está retraído en IOS. Los problemas y síntomas se describen en detalle a continuación:

La página en cuestión es una estructura de formulario. Es decir, es similar a una estructura con cuatro formularios de entrada bajo un div para que los usuarios completen información de correo. similar:

 <div> <input type=text placeholder=Por favor, complete la provincia, ciudad y condado/> <input type=text placeholder=Por favor, complete la dirección/> <input type=text placeholder=Por favor, complete el nombre/> < input type=text placeholder=Por favor, complete la dirección/número de contacto/></div>

La captura de pantalla es la siguiente:

Cuando el usuario ingresa el número de contacto en el teléfono móvil, aparecerá el teclado del iPhone. En este momento, para permitir que el usuario vea el cuadro de entrada del teléfono, toda la página se moverá hacia arriba en el iPhone (de lo contrario, el teclado). cubrirá el cuadro de entrada del teléfono). En este momento, la parte superior de la página es en realidad parte de la distancia desde nuestra ventana gráfica (vemos una fila de cuadros de entrada que desaparecen de la interfaz).

Sin embargo, cuando el usuario completa la entrada y cierra el teclado, aunque el teclado esté guardado, la posición de la página no se restaurará.

De hecho, esto se debe a la incapacidad de iOS para evitar que la parte de la página que se desplaza fuera de la ventana gráfica caiga cuando se retrae el teclado. En este momento, el usuario puede arrastrar la página hacia atrás con el dedo.

Pero la experiencia no fue buena después de todo.

Para resolver este problema, podemos llamar a window.scrollTo(0, 0) cuando el cursor del usuario abandona el cuadro de entrada para desplazar la página y alinearla con la parte superior de la ventana gráfica, logrando así el efecto de inicio de página.

Entonces, ahora el problema es agregar eventos de desenfoque a los cuatro cuadros de entrada del formulario y luego llamar window.scrollTo en el controlador. Sin embargo, ya sea que se agregue mediante @blur de Vue o mediante operaciones DOM, se deben agregar 4 detectores de eventos, lo cual no es muy elegante. Naturalmente, pensamos en utilizar proxies de eventos.

Es decir, colocamos el detector de eventos en el elemento superior y luego definimos una función inputBlur para esperar la activación;

 <div @blur=inputBlur> <input type=text placeholder=Por favor, complete la provincia, ciudad y condado/> <input type=text placeholder=Por favor, complete la dirección/> <input type=text placeholder=Por favor, complete el nombre/> <input type=text placeholder=Por favor, introduzca su número de contacto/></div>

Como resultado, descubrimos que nuestro detector de eventos no se activó. La razón es que el evento blur del cuadro de entrada no puede aparecer.

Después de realizar consultas, se descubrió que los dos eventos DOM focus y blur no pueden aparecer en la especificación. De manera similar, hay otros dos eventos focusin y focusout que pueden burbujear.

Algunos artículos en Internet mencionan que focusin y focusout son eventos DOM admitidos únicamente por los navegadores IE. De hecho, cuando miramos el documento MDN, encontramos que estos dos eventos se han convertido en un estándar en la especificación DOM 3 y son compatibles con una gran cantidad de navegadores.

Por lo tanto, para resolver el problema de manera decisiva a través de estos dos eventos, lo cambiamos focusout

 <div @focusout=inputBlur> <input type=text placeholder=Por favor, complete la provincia, ciudad y condado/> <input type=text placeholder=Por favor, complete la dirección/> <input type=text placeholder=Por favor, complete el nombre/> <input type=text placeholder=Por favor, introduzca su número de contacto/></div>

Luego, implemente nuestro controlador de eventos:

 inputBlur(e) { // Primero, determine si el elemento de destino que desencadena el evento es un cuadro de entrada. Solo nos centramos en el comportamiento del cuadro de entrada. if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'entrada') { window.scrollTo(0,0),

En este momento, nuestro problema está resuelto. Al ingresar contenido desde el cuadro de entrada y luego hacer clic en Finalizar en el teclado para cerrar el teclado, el efecto está en línea con nuestras expectativas.

Sin embargo, después de realizar pruebas en teléfonos móviles, descubrimos que cuando cambiamos directamente del 电话输入框al 姓名输入框, la página vibrará. Sigamos el análisis.

De hecho, la razón por la que las dos cajas de entrada tiemblan al cambiar también es muy simple. Porque cuando cambiamos entre los dos cuadros de entrada anteriores, la página primero activará blur del 电话输入框y luego activará focus del 姓名输入框. En este caso, cuando se produce desenfoque, se activará nuestro window.scrollTo(0,0) , lo que hará que la página se desplace hacia abajo y luego 姓名输入框se enfocará, por lo que el teclado seguirá apareciendo. hará que la página se mueva hacia arriba nuevamente.

De hecho, al cambiar entre dos cuadros de entrada, no necesitamos activar el comportamiento window.scrollTo cuando el primer cuadro de entrada está borroso. Entonces, modifiquemos nuestro código para que cuando ocurra la operación de cambio del cuadro de entrada, se pueda cortar el comportamiento del primer cuadro de entrada. Aquí usamos setTimeout para resolver:

 <div @focusout=inputBlur @focusin=inputFocus> <input type=text placeholder=Por favor, complete la provincia, ciudad y condado/> <input type=text placeholder=Por favor, complete la dirección/> <input type=text placeholder= Complete el nombre/> < input type=text placeholder= Complete su número de contacto/></div> 

 inputBlur(e) { // Primero, determine si el elemento de destino que desencadena el evento es un cuadro de entrada. Solo nos centramos en el comportamiento del cuadro de entrada. if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') { // El cuadro de entrada pierde el foco y es necesario sacar el teclado IOS del desplazándose por parte de la página para restaurarla. Desplácese por la página hasta la parte superior de la ventana y alinéela console.log('set timer') this.timer = setTimeout(() => { console.log('timer trigger') window.scrollTo(0,0); }, 0) } }, inputFocus(e) { // Si está enfocado, elimina el temporizador del cuadro de entrada anterior if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'entrada') { clearTimeout(this.timer);

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.