El comando HTML <label> no funciona en el navegador de Iphone

Question

En una página html que estoy haciendo, traté de hacer que se pueda hacer clic en div usando html y css. Esto funcionó perfectamente en algunos de los navegadores más importantes en los que lo he probado (Chrome, Firefox, Opera, Safari), así como en un teléfono HTC, pero cuando intenté probarlo en Iphone noté que simplemente no funcionaba. Las casillas de verificación en sí no eran seleccionables.

Este es mi (aparte de trabajar en Iphone) Código:

HTML:

<div class="" style="height: 30px;"> 
     <div style="display: table; width: 100%;"> 
     <div style="display: table-row; width: 100%;"> 
     <div style="display: table-cell;"> 
     <label for="3171">Text....</label> 
     </div> 

     <div style="display: table-cell; text-align: right;"> 
     <input type="checkbox" id="3171" name="3171"> 
     </div> 
     </div> 
     </div> 
     <label for="3171"> 
     <span class="blocklink">Invisible text</span> 
     </label> 
     </div> 

CSS:

.blocklink { 
    display: block; 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    text-indent: -999em; 
    top: 0; 
    width: 100%; 
} 

Así como se puede ver la técnica que estoy usando es Básicamente solo tiene un <label> extendido por todo el padre div por lo que en cualquier lugar que haga clic, marcará/desmarcará la casilla vinculada.

Lamentablemente, esto no funciona en el iPhone. ¿Sería posible seguir usando esta técnica de alguna manera, pero también proporcionar soporte para iPhone? (Preferiblemente sin javascript, porque estoy realmente salir de mi manera de usar sólo HTML & CSS)

Gracias de antemano,

Arne

Answer 1

Agregar un onclick="" vacío a la etiqueta hace que el elemento se vuelva a hacer clic en IOS4. Parece que, por defecto, la acción es bloqueada o superada por la presión y mantener pulsada la función de copiar y pegar texto.

<label for="elementid" onclick="">Label</label> 

Answer 2

Por alguna oscura razón, el uso de CSS, si se aplica :

label { cursor: pointer; } 

va a trabajar tanto en iPhone y iPad.

Answer 3

Lo resuelto mediante la colocación de un vacío onclick = "" en un elemento padre:

<form onclick=""> 
    <input type="radio" name="option1" value="1"> 
    <label for="option1">Option 1</label> 

    <input type="radio" name="option2" value="2"> 
    <label for="option2">Option 2</label> 

    <input type="radio" name="option3" value="3" checked="checked"> 
    <label for="option3">Option 3</label> 
</form> 

Answer 4

Si cambia DOM en el controlador de eventos (ejemplo en la OnMouseEnter) esta causa omitir todos los siguientes manejadores incluyen onClick .

SetTimeout no corrige esto.

Ejemplo: 1. en onMouseEnter use setTimeout con la función inyecta nuevo div en DOM 2. no se llama a ningún controlador onClick.

Solución: evite el cambio DOM en el controlador de eventos.

Observación: se ha encontrado un problema para la etiqueta de la etiqueta, pero aún persiste para span dentro de la etiqueta. Puede ser este problema presente en cualquier tipo de etiquetas.

Este comportamiento se encuentra solo para iOS móvil. En Safari de escritorio y en Mac OS Safari, todo está bien.

Answer 5

Otra solución -aunque más hacky, pero a prueba de balas- sería colocar la casilla de verificación sobre la etiqueta, z-index, aumentar el ancho/alto para abarcar la etiqueta subyacente y luego 0 la opacidad.Esto, por supuesto, sería tedioso si hay varias etiquetas en la página ... Naturalmente, también implementaría el posicionamiento absoluto para ese tamaño de medio; no es necesario hackear todo el entorno de la aplicación.

Answer 6

El problema parece persistir en iOS9 si algún elemento html está contenido dentro de una etiqueta. Al menos sucede con los elementos span dentro de él. 'pointer-events: none' lo arregla.

<label for="target"> 
    <span>Some text</span> 
</label> 

El código anterior no sería desencadenar un cambio de la entrada de destino, cuando el usuario toca 'TEXTO', a menos que agregue el siguiente CSS:

label span { 
    pointer-events: none; 
} 

Answer 7

me encontré con un algo único situación. Ya estábamos usando pointer-events: none en todos spans en labels. Sin embargo, luego tuvimos que agregar un <a> como hacer clic dentro de una de esas etiquetas.

<label> 
    <span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span> 
</label> 

Por lo tanto, hemos creado explícitamente pointer-events: all en los <a>.

label > span { pointer-events: none; } 
label > span > a { pointer-events: all; } 

Esto funciona en la última versión de Chrome, Firefox, IE 11 y iOS 9 Safari.

Answer 8

Reduje mi problema al uso de la biblioteca Fastclick; cuando lo eliminé de mi base de código, mis problemas desaparecieron, lo que me indica que no hay un problema nativo de iOS/FF como sugieren otras respuestas aquí.

Sin conocer las bibliotecas de otras personas están usando, pero sabiendo que Fastclick es excepcionalmente común, puedo sugerir que la causa de este error es en realidad un problema de biblioteca - no uno que ha logrado persistir durante años de lanzamientos de Apple ! Parece más probable. Tal vez los otros aquí pueden arrojar algo de luz sobre si están usando Fastclick?

Más información

Algunos navegadores evitar entradas de archivos de que surjan código de cliente como medida de seguridad. Intente desencadenar un evento de clic desde la consola con document.querySelector('input[type=file]').click() y funcionará, haga lo mismo con su código y fallará misteriosamente.

Imagino que la razón por la que existe este error es porque un controlador ontouchstart se está aplicando al <label /> por Fastclick. Cuando se activa en un dispositivo táctil, la biblioteca sustituirá ese evento por el controlador onclick, o en este caso la funcionalidad nativa <label />. Desafortunadamente, esto significa que el código del cliente está activando la apertura de la entrada del archivo, y está siendo bloqueado por el navegador.