JavaScript en iOS: abrir un elemento de selección HTML

Question

No tengo esperanzas, pero pregunto por las dudas.

Me gustaría poder usar JavaScript para abrir un elemento de selección en Safari móvil para iPhone/iPad.

Una búsqueda extensa de Google/Stack Overflow muestra que a mucha gente le gustaría poder hacer esto en los navegadores en general, pero no es compatible (¿por qué no ?, me pregunto). Se han sugerido varios hacks, desde llamar al focus() en el elemento de selección y cambiar su propiedad size para hacer visibles más elementos option, o construir un elemento de selección completamente falso con elementos <div> y <ul>. Sin embargo, me gustaría utilizar los controles de selección nativos del navegador en iPad y iPhone.

Me preguntaba, tal vez, alguien podría saber de un método patentado de Apple WebKit para hacer esto. Sería algo así como:

var myselect = document.getElementsByTagName("select")[0]; 
myselect.open(); // this method doesn't exist 

Como beneficio adicional, también sería útil saber de una propiedad booleano que indica si el elemento de selección está actualmente abierto/activo, o no (es decir, no sólo si el elemento tiene enfoque). Sé que puedo resolver esto haciendo un seguimiento del clic y cambio de eventos, pero una propiedad simple sería útil.

¿Desea pensar?

---

ACTUALIZACIÓN:
Todavía no tengo la respuesta, pero me he dado cuenta que la simulación de un mousedown abre con éxito un elemento de selección en Google Chrome, pero no IPAD o Firefox y así sucesivamente:

function simulateMouseEvent(eventName, element) { 
    var evt = document.createEvent("MouseEvents"); 
    evt.initMouseEvent(eventName, true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    element.dispatchEvent(evt); 
} 

simulateMouseEvent("mousedown", select); 

ACTUALIZACIÓN:
he hecho una pregunta relacionada, pero diferente (y de manera similar sin respuesta!) en cuadros de selección aquí: Is there a DOM event that fires when an HTML select element is closed?

Answer 1

Activación de controles HTML con JS es un área muy gris, en parte por razones de seguridad y en parte debido a la falta de soporte. Incluso utilizando frameworks como jQuery, no puedes simplemente click() un enlace para seguirlo de la misma manera que click() en un botón: necesitas activar un evento click nativo en el nivel del navegador (creo que la última versión de Selenium hace esto, pero eso es un marco de prueba tan inadecuado para este problema). ¡Felicidades por la posibilidad de lograr un resultado parcial en Chrome! Sin embargo, no encontrará una solución universal que utilice entradas de selección real.

se recomienda usar un tipo diferente de control - ya sea una pila vertical de botones si desea presionar uno para activar una función, o una pila de botones de radio respaldados por etiquetas (con un poco de CSS) si desea una formato de opción múltiple.

Answer 2

¿Has probado el método change()?

Answer 3

El elemento seleccionado debe estar visible. Si utiliza jQuery puede hacerlo de la siguiente manera:

$('mySelectElementSelector').focus(); 

El móvil se mostrará el control de selección por defecto. En el escritorio, simplemente enfóquese en el control de selección.

Answer 4

Tengo una solución de trabajo para esto que funciona en las versiones recientes de iOS y Android. Todavía no he probado en versiones anteriores. No hay dos formas de hacerlo: esta solución es un truco. Pero funciona si se implementa con cuidado.

En mi situación tenía iOS 7 como elemento de interruptor de alternar. Quería que la vista del selector para el select se presente cuando se activó el interruptor. En mi caso, no necesitamos o queremos que el usuario vea el campo select. Simplemente queríamos utilizar la agradable interfaz de pick-er-picker de iOS.

Utilicé CSS para posicionar y estirar el select completamente sobre el interruptor. Luego configuro el opacity en CSS a algo como opacity: .001;, que lo hace invisible para todos los efectos. Todavía puede funcionar con opacidad 0 pero sentí que dejar un poco de opacidad puede ser más seguro y realmente no se puede ver todo de todos modos. Ahora, cuando el usuario toca el área de la pantalla que muestra el interruptor, los eventos tap se dirigen al select, lo que hace que se muestre la vista del selector.

En el caso de la onchangeselect puse display: none; para ocultar por completo la select. Esto significa que cuando el usuario toca el interruptor para apagarlo, interactúa con el interruptor mismo. Cuando el interruptor se apaga, configuro display: block para devolver el select a su estado activo.

Mi caso de uso es estrecha, pero la técnica de posición/opacidad debe ser adaptable a muchos casos de uso, aunque puede que tenga que tener 2 select elementos en los casos en que se desea que el campo sea visible.

Aquí hay una captura de pantalla que muestra la técnica. El opacity se establece en 0.25 en esta captura de pantalla con fines de demostración. Cuando se establece en 0.001 que no se puede ver el select