Todos pueden estar familiarizados con el formulario de lista desplegable Select, pero el formulario de lista desplegable predeterminado a menudo hace que algunos sitios web se sientan feos, y es difícil ajustar el estilo de la selección con CSS. Por lo tanto, muchos sitios web hacen formularios desplegables seleccionados que están más en línea con el estilo del sitio web, y a menudo usan JS para simular este efecto.
Por ejemplo, Tudou.com, Taobao Mall y Amazon son todos los formularios de lista desplegables hechos con JS.
El resultado de esto obviamente se unifica visualmente con el estilo general del sitio web, y el estilo de lista desplegable es muy hermoso, pero también trae algunas reacciones adversas. Debido a que se hace con JS, encontrará muchos efectos inesperados. Analicemos sus respectivos defectos a través de los tres sitios web del probador:
El cuadro de selección de categoría de búsqueda para papas me hace sentir raro cada vez que hago clic:
1. Después de hacer clic, la lista emergente es diferente de lo que espera. Subconscientemente, era una lista desplegable, pero la papa me dio una lista a mediados.
2. Use las teclas arriba/hacia abajo para elegir habitualmente, pero toda la página se desplaza.
3. En ira, ya no necesitaba cerrarlo. Presione la tecla ESC, pero no hay respuesta.
4. Después de deshabilitar JS, no está completamente disponible.
Del mismo modo, Taobao Mall también se ve hermoso:
Excepto para el punto 1, todo lo demás es como las papas, con problemas de accesibilidad y disponibilidad.
La solución es muy simple, solo use un cuadro de selección nativo, como Amazon:
¿Por qué no se alienta a usar cajas de selección personalizadas en páginas web?
El cuadro Select Select es un control interactivo muy maduro. La madurez significa que los usuarios son fáciles de aceptar, pero la madurez también significa que son considerados y tienen detalles interactivos muy ricos. Por ejemplo: la respuesta a las operaciones de teclado como PGUP/PGDN, Home/End y la dirección emergente de la lista desplegable se pueden ajustar automáticamente en diferentes posiciones, etc.
El uso de JS para simular cajas de selección requiere mucho trabajo y pruebas meticulosas. Incluso si la empresa está dispuesta a invertir, aún no puede implementar algunas características de los controles nativos. Por ejemplo: en el cuadro de selección de Amazon anterior, tiré del navegador a un nivel muy bajo, y la lista desplegable se puede extender fuera del navegador.
Para un pequeño postre visual, se necesitaron tantos detalles prácticos para que la interacción perdiera tanto tiempo, y el programador frontal tardó mucho en ser ingrato, lo cual fue realmente malo.
PD: Para usar un cuadro de selección personalizado, se deben cumplir las siguientes condiciones:
1. Tan loco como Google, dispuesto a pasar mucho tiempo y recursos.
2. Tan meticuloso como Google, hágalo bien y simule a fondo.
3. Aplicar en la aplicación web.
Desafortunadamente, en el país, las empresas tan locas y meticulosas como Google o Facebook aún no han aparecido.