Cuadro de entrada de contraseña de pago de 6 dígitos del subprograma WeChat
Requisitos del producto
Cuadro de entrada de contraseña de pago de 6 dígitos del subprograma WeChat
Efecto de implementación
Cuadro de entrada de 6 dígitos con texto no claro, simula el cursor, la entrada se mueve automáticamente al siguiente dígito, los 6 dígitos se configuran automáticamente
Principio de implementación
1. Coloque un cuadro de entrada y Ocultar su posición. Un cuadro de entrada, ocultar su texto y posición, y establecer el estilo del cuadro de entrada de pago (formulario).
2. Cuando se hace clic en el cuadro de entrada, configure el formulario para que esté enfocado, evoque el teclado, haga clic en el espacio en blanco y pierda el foco y configúrelo para que no esté enfocado
3. Limite el número máximo de caracteres en el cuadro de entrada a 6, controle el estado del cuadro de entrada. y muestra la longitud del valor del cuadro de entrada como un punto emergente y condiciones de visualización del cursor
4. Cuando el valor del cuadro de entrada es igual a 6, configura el evento del componente que se pasará a la referencia página, y la página personaliza el evento (iniciar una solicitud de pago, etc.)
Otros aspectos a tener en cuenta
Un PIN de pago de 6 dígitos es un requisito muy común.
El lado H5 usa vue para crear componentes, y el lado de la aplicación también necesita implementarlos. No hay muchos componentes similares recuperados en la página web, son solo como referencia.
Dirección de Github:/evan2020/six-input-box