0
289
ViewsPosición de la imagen <entrada> cuadro de diálogo abierto en Safari iOS
Necesito activar la selección de imágenes del navegador desde la biblioteca/cámara de fotos en respuesta a que el usuario haga clic en un elemento personalizado (ocultando el <input> predeterminado).
Usando el código estándar sugerido a menudo para esto.
El HTML:
<input id="image-input" style="display: none" type="file" accept="image/*"/> <button onclick="browse()">BROWSE</button>Y guión:
<script> function browse() { document.getElementById("image-input").click(); } </script>Esto funciona como se esperaba, pero en iOS (iPhone, 15.4), la posición del cuadro de diálogo emergente es impredecible.
La mayoría de las veces, el cuadro de diálogo aparece debajo del botón, pero no exactamente en el mismo lugar y, a veces, aparece en la parte inferior de la página. Parece que no puedo determinar qué acción del usuario causa los diferentes comportamientos.
Si no recuerdo mal, en versiones anteriores de iOS, ¿este cuadro de diálogo se abría como un cajón fijo en la parte inferior de la pantalla?
¿Hay alguna forma de controlar la posición de este cuadro de diálogo? Idealmente, me gustaría que se abriera como un cajón modal fijo en la parte inferior, pero cualquier cosa que pueda hacer un comportamiento controlable consistente también funcionaría.
2 answers
Answer question0
Así que eché un vistazo a este problema en mi iPhone 8+, Safari, iOS 15.2.1
I created this fiddle here to play around with: https://codepen.io/treckstar_/pen/oNELeqY
No pude replicar el problema exacto que estás diciendo. Lo que obtuve fue todo lo contrario. Desoculté la entrada del archivo para poder intentar hacer clic en ambos y ver qué sucede. Cada cierto tiempo, hacía clic en la entrada "debería estar oculto", el cuadro de diálogo para abrir el archivo se abría en la parte superior donde se encuentra el botón de exploración.
Como no tenemos el código exacto, no puedo estar seguro, pero estoy pensando que cualquier entrada oculta que tenga se encuentra en algún lugar en la parte inferior de la página y solo muestra dónde se hizo clic en la última entrada.
Creo que el problema principal es usar JavaScript/jQuery para hacer clic en un botón que provoca un posicionamiento intermitente del cuadro de diálogo para las entradas de archivos en iOS Safari.
Por lo tanto, recomendaría que mi solución sea, no usar JavaScript/jQuery para hacer clic en el botón de archivo.
Potencialmente, podría configurar un botón con las posiciones de carga de archivos encima y con la opacidad establecida en 0.
#image-input { position: absolute !important; left: 0px; top: 0px; clip: rect(0px, 40px, 40px, 0px); opacity: 0.0; padding: 10px 0px; } <a id="image-file-button" data-role="button">Button</a> <input id="image-input" type="file" data-role="none" name="image-file-upload" />0
La causa del movimiento de la ventana emergente podría ser que otro elemento en la página lo está moviendo y cambiando a dónde se mueve, en diferentes dispositivos estará en diferentes lugares porque se mueve a donde no se verá aplastado.