La <label>commande</label> HTML <label>ne fonctionne pas dans le navigateur Iphone</label>

Question

Dans une page html que je fais, j'ai essayé de faire des div à l'cliquable à l'aide de html et css. Cela a parfaitement fonctionné dans certains grands navigateurs que j'ai testé (Chrome, Firefox, Opera, Safari), ainsi que d'un téléphone HTC, mais quand j'ai essayé de le tester sur l'Iphone, j'ai remarqué ça ne fonctionne pas. Les cases elles-mêmes n'étaient même pas sélectionnable.

C'est mon (travail en dehors de l'Iphone) code:

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%;
}

Donc, comme vous pouvez le voir, la technique que j'utilise est fondamentalement juste un <label> répartis sur tout le parent div donc n'importe où vous cliquez dessus, il va cocher/décocher liés case.

Malheureusement, cela ne fonctionne pas sur IPhone. Serait-il possible de garder en quelque sorte à l'aide de cette technique, mais également de fournir de support de l'IPhone? (De préférence sans javascript, car je suis vraiment sortir de ma façon d'utiliser uniquement le HTML et CSS)

Merci d'avance,

Arne

Answer 1

L'ajout d'un onclick="" vide à l'étiquette rend l'élément cliquable à nouveau sur IOS4. Il semble que par défaut l'action soit bloquée ou dépassée par la pression et maintenez la mécanique de copier-coller du texte.

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

Answer 2

Je l'ai résolu en plaçant un onclick = "" vide sur un élément parent:

 <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 3

Pour une raison obscure, en utilisant CSS, si vous postulez:

 label { cursor: pointer; }
 

Va fonctionner à la fois sur iPhone et iPad .

Answer 4

Si vous changez de DOM sur gestionnaire d'événements (par exemple dans onMouseEnter) cette cause sauter tous les prochaine gestionnaires d'onClick.

SetTimeout ne pas résoudre ce problème.

Exemple: 1. dans onMouseEnter utiliser setTimeout avec la fonction injecté de nouveaux div dans le DOM 2. tout onClick gestionnaire n'est pas appelé.

Solution: éviter de changer les DOM dans la gestion d'événements.

Remarque: ce problème trouvé pour la balise d'étiquette, mais persistent encore, pour la durée de l'intérieur de l'étiquette. Peut-être ce problème présente sur tout type de balises.

Cette behavuor trouvé seulement pour mobile iOS. Dans le bureau de Safari et Mac OS Safari - tout est ok.