Simule la función de comentario de WeChat Moments, como se muestra en la figura:
Primero considere que el teclado empuja el cuadro de entrada hacia arriba para que el cuadro de entrada quede justo encima del teclado.
Solución: posicionamiento fijo, coloque el cuadro de entrada en la parte inferior de la página, cuando el teclado se levante, levantará automáticamente el cuadro de entrada
Así que hay tal demostración:
Hay algunos detalles:
1. La esquina inferior derecha del teclado muestra por defecto el botón "Listo" en lugar de "Enviar". Se puede cambiar configurando el atributo confirm-type="send" de la etiqueta de entrada
2. El teclado está cerca del cuadro de entrada, cubriendo el extremo inferior de la capa envolvente del cuadro de entrada. Puede configurar el espaciado del cursor para cambiar la distancia entre el cursor y el teclado
3. Cuando hace clic en el espacio en blanco de la página y en el botón de cerrar del método de entrada, el cuadro de entrada debe estar oculto. Este es un problema muy interesante. Parece un poco complicado, pero es solo un evento que el cuadro de entrada está fuera de foco.
Entonces obtuvimos una demostración relativamente perfecta:
Hay un problema grave: <input> es un cuadro de entrada de una sola línea, pero si desea ingresar varias líneas, debe usar <textarea>. Luego, veamos cómo se reemplaza la etiqueta por un área de texto:
El teclado tiene un emoticón adicional y un botón de finalización que puede acabar con el trastorno obsesivo-compulsivo, y la esquina inferior derecha es una "nueva línea" en lugar de un botón de "enviar". Consulté la API y descubrí que para las etiquetas de área de texto, el comportamiento predeterminado de estos teclados no se puede cambiar.
Entonces, la etiqueta se vuelve a cambiar a entrada, entonces, ¿cómo lograr una entrada de varias líneas?
Hagamos una conjetura aquí. La capa envolvente del cuadro de entrada es una <vista de desplazamiento>. Cuando el cuadro de entrada de una sola línea se ingresa al encabezado (supervisando la entrada y calculando la posición del cursor), cree una entrada de una sola línea y dé el foco al cuadro de entrada. De esta manera, se forma un cuadro de entrada de varias líneas compuesto por varios cuadros de entrada de una sola línea. Finalmente, divida el texto en todos los cuadros de entrada cuando haga clic en Enviar.
¿Es factible este método? Creo que es factible, pero no quiero hacerlo Así es, los guerreros del teclado deberían tener tanta confianza.
Lo anterior es mi exploración del comportamiento del teclado del subprograma WeChat, porque mi propio nivel es limitado, si tiene algún error o tiene una solución mejor, corríjame.