web-dev-qa-db-fra.com

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

Dans une page html que je crée, j'ai essayé de rendre cliquable la div en utilisant html et css. Cela a parfaitement fonctionné sur certains principaux navigateurs dans lesquels je l'ai testé (Chrome, Firefox, Opera, Safari), ainsi que sur un téléphone HTC, mais lorsque j'ai essayé de le tester sur Iphone, j'ai remarqué que cela ne fonctionnait tout simplement pas. Les cases à cocher elles-mêmes n'étaient même pas sélectionnables.

Ceci est mon code (travaillant en dehors de sur Iphone):

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

Ainsi, comme vous pouvez le constater, la technique que j'utilise utilise simplement un <label> sur le parent div. Ainsi, chaque fois que vous cliquez, la case cochée/décochée est cochée.

Malheureusement, cela ne fonctionne pas sur iPhone. Serait-il possible de continuer à utiliser cette technique, mais aussi de fournir un support IPhone? (De préférence sans javascript, parce que je ne fais vraiment que de n'utiliser que du HTML et du CSS)

Merci d'avance,

Arne

iphonehtmlcss
35
arnehehe

L'ajout d'un onclick="" vide à l'étiquette rend l'élément cliquable de nouveau sur IOS4. Il semble que, par défaut, l'action soit bloquée ou dépassée par la presse et que vous mainteniez les mécanismes de copie et de collage enfoncés.

<label for="elementid" onclick="">Label</label>
61
Dan Manion

Le problème semble persister dans iOS9 si des éléments HTML sont contenus dans une étiquette. Au moins, cela se produit avec des éléments d'envergure à l'intérieur. 'pointer-events: none' le corrige.

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

Le code ci-dessus ne déclenchera pas de modification de l'entrée cible lorsque l'utilisateur clique sur 'Some Text', à moins que vous n'ayez ajouté le css suivant:

label span {
  pointer-events: none;
}
17
Adam Widmański

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>
11
Hilde

Pour des raisons obscures, en utilisant CSS, si vous appliquez:

label { cursor: pointer; }

Va travailler à la fois sur iPhone et iPad .

7
Jose Camporro

Je suis tombé sur une situation quelque peu unique. Nous utilisions déjà pointer-events: none sur toutes les spans dans labels. Cependant, nous devions ensuite ajouter un <a> qui pouvait être cliqué dans l'une de ces étiquettes.

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

Nous avons donc explicitement défini pointer-events: all sur ces <a>.

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

Cela fonctionne dans les dernières versions de Chrome, Firefox, IE 11 et iOS 9 Safari.

1
matthewpavkov

Une autre solution - bien que plus robuste, mais à l'épreuve des balles - consisterait à positionner absolument la case à cocher sur l'étiquette, à l'index z, à augmenter la largeur/hauteur pour englober l'étiquette sous-jacente, puis l'opacité. Cela serait bien sûr fastidieux s’il y avait plusieurs étiquettes sur la page ... Naturellement, vous ne mettriez également en œuvre que le positionnement absolu pour cette taille de support; pas besoin de pirater l'environnement complet de l'application.

1
pjldesign

Si vous changez le DOM sur le gestionnaire d'événement (exemple dans onMouseEnter), cela évite que tous les gestionnaires suivants incluent onClick.

SetTimeout ne répare pas cela. 

Exemple 1. dans onMouseEnter, utilisez setTimeout avec la fonction injectée new div dans DOM 2. aucun gestionnaire onClick n'appelle.

Solution: éviter de modifier le DOM dans le gestionnaire d'événements.

Remarque: problème rencontré pour l'étiquette, mais persiste pendant une période dans l'étiquette. Ce problème peut être présent sur toutes les balises de type.

Ce comportement trouvé uniquement pour iOS mobile. Safari de bureau et Mac OS Safari - tout va bien.

0
Enyby

J'ai limité mon problème à l'utilisation de la bibliothèque Fastclick; lorsque je l'ai supprimé de ma base de code, mes problèmes ont disparu, ce qui m'indique qu'il n'y a pas de problème natif iOS/FF comme suggéré par d'autres réponses ici.

Sans connaître les bibliothèques utilisées par d'autres personnes, mais sachant que Fastclick est exceptionnellement commun, puis-je suggérer que la cause principale de ce bogue est en fait un problème de bibliothèque - aucun problème qui a réussi à persister pendant des années de versions Apple! Cela semble plus probable. Peut-être que les autres ici peuvent nous éclairer s’ils utilisent Fastclick?

Plus d'informations

Certains navigateurs empêchent les entrées de fichiers d'être déclenchées par le code client en tant que mesure de sécurité. Essayez de déclencher un événement click à partir de la console avec document.querySelector('input[type=file]').click() et cela fonctionnera, faites de même avec votre code et cela échouera mystérieusement. 

J'imagine que la raison de ce bogue est qu’un gestionnaire ontouchstart est appliqué au <label /> par Fastclick. Lorsqu'il est déclenché sur un périphérique tactile, la bibliothèque transfère cet événement par proxy au gestionnaire onclick ou, dans ce cas, à la fonctionnalité native <label />. Malheureusement, cela signifie que le code client déclenche l'ouverture du fichier et qu'il est bloqué par le navigateur.

0
Simon Robb