web-dev-qa-db-fra.com

Taper sur <label> dans Mobile Safari

Si vous appuyez sur <label>, la mise au point automatique n'est pas liée dans Mobile Safari, mais si une fonction vide comme clickhandler est définie Comme ceci

document.getElementById("test_label").onclick = function () {};

résout le problème.

Ceci est le code source complet.

<body>
    <input type="checkbox" id="test" name="test">
    <label for="test" id="test_label">This is the label</label>
    <script>
      document.getElementById("test_label").onclick = function () {};
    </script>
</body>

Savez-vous pourquoi cela fonctionne?

javascriptiosforms
31
Viktor

On dirait que vous avez trouvé un bug dans iOS Safari. Toutes nos félicitations! Trouver et signaler des bogues crée une dépendance.

Vous pouvez signaler ce problème et d’autres bogues à Apple à l’adresse https://bugreport.Apple.com/ . Apple pourrait ne pas donner suite immédiatement, mais à un moment donné, ils devraient vous informer qu'il s'agissait d'un duplicata d'un bogue existant, qu'ils ne le considéraient pas comme un bogue ou (si vous êtes chanceux) que vous devriez le tester. à nouveau dans une nouvelle version d'iOS.

En attendant, conservez cette solution de contournement - vous en aurez besoin.

15
s4y

Personnes utilisant FastClick:

Utilisez ce CSS:

label > * {
    display: block;
    pointer-events: none;
}

voir ce numéro: https://github.com/ftlabs/fastclick/issues/60

et ce code: http://codepen.io/visnup/pen/XJNvEq

40
maikel

Nous avons pu contourner ce problème sur Etsy en ajoutant simplement cette ligne de code à notre fichier javascript mondial.

$('label').click(function() {});

Nous utilisons la bibliothèque xui micro js et cette ligne attache simplement un gestionnaire de clic vide à tous les éléments label. Pour une raison quelconque, cela résout comme par magie le problème du safari mobile.

24
Ramin B.
<label for="myID" onclick="">
  <input type="checkbox" id="myID" name="myNAME">
  <span class="name-checkbox"> My name for my checkbox </span>
  <span class="some-info">extra informations below</span>
</label>

Pour activer le tapotement sur iOS partout sur l'étiquette, vous devez ajouter à ses enfants directs (attendus une entrée), des événements de pointeur: aucun;

.name-checkbox, .some-info {
      pointer-events: none;
    }
5
Julien Pecorino

je sais que ce n'est pas vraiment du balisage agréable: je viens de coder en dur un onclick vide comme celui-ci onclick="" sur chaque étiquette. Cela a fonctionné sur une étiquette d'emballage:

<label for="myID" onclick="">
 <input type="checkbox" id="myID" name="myNAME">
 Check to check
</label>
4
Frank Lämmer

l'ajout d'un attribut onclick résoudrait le problème.

<label for="test" id="test_label" onclick="">
2
Yun C Han

Dans iOS 7, ce problème persiste sans qu'aucune des solutions de contournement ne fonctionne pour moi.

Ma solution consistait à combiner l'événement click avec touchend:

var handler = function(e) { /* do stuff */ };
$("ol input[type=checkbox] ~ label")
  .on('touchend', handler)
  .on('click', handler);

Quelques informations utiles dans ce numéro de JQuery: http://bugs.jquery.com/ticket/5677 Surtout la partie où il est dit techniquement qu'il n'y a pas d'événement click sur mobile. 

2
Dex

Je viens de résoudre mon problème similaire comme ceci:

input {
position: absolute;
width: 120px; // size of my image
height: 100px; // size of my image
opacity: 0;
display: inherit; // Because i'm hidding it on other resolutions
}
0
Alex Bohariuc

Un comportement vraiment étrange s'est produit pour moi, où rien de ce qui précède ne résoudrait le problème. Si j'avais placé du texte ou des images à l'intérieur de l'élément label, un clic sur cet élément ne fonctionnait pas. Cependant, lorsque j'ai ajouté une marge et un remplissage à l’étiquette, un clic sur la marge ou le remplissage, mais pas sur le texte/les images, a fonctionné. Donc, ce que j’ai fait, c’est de faire de l’étiquette 100% w 100% h parfaitement positionnée sur mon texte et mes images. 

<div class="wrapper">
  <label class="label-overlay" for="file"></label>
  <img src="something.png">
  <p>Upload File</p>
  <input type="file" name="file">
</div>


<style>
  .wrapper{display:inline-block;}
  .label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;}
</style>
0
Steffan Perry

S'il existe déjà un attribut onclick, il ne faut pas le remplacer. Dans mon test, cela a fonctionné (l'attribut onclick) et la case à cocher a également été cochée. donc ma solution est:

<script type="text/javascript">
    var labels = document.getElementsByTagName("LABEL");
    var labels_l = labels.length;
    for(var l = 0; l < labels_l; l++){
        if(labels[l].hasAttribute("for") && (!labels[l].hasAttribute("onclick"))){
            labels[l].onclick = function () {};
        }
    }
</script>
0
Yariv de Botton

ou vous pouvez laisser for = "", et mettre en évidence la saisie lorsque vous cliquez sur l'étiquette, voici le code fonctionne dans réagit

<input ref={(node) => { this.input = node; }} />

<label htmlFor="" onClick={() => { this.input.focus();}}/>
0
hui chen