Tapping on in Mobile Safari

Question

Tapping on does not auto-focus linked in Mobile Safari but If an empty function as clickhandler is defined like this

document.getElem         


        

Answer 1

People using FastClick:

Use this CSS:

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

see this issue: https://github.com/ftlabs/fastclick/issues/60

and this codepen: http://codepen.io/visnup/pen/XJNvEq

Answer 2

It looks like you found a bug in iOS Safari. Congratulations! Finding and reporting bugs is addictive.

You can report this and other bugs to Apple at https://bugreport.apple.com/. Apple might not follow up immediately, but at some point in the future they should notify you that it was a duplicate of an existing bug, that they don’t consider it a bug, or (if you’re lucky) that you should test it again in a new version of iOS.

In the mean time, hold onto this workaround — you’ll need it.

Answer 3

or you can let for="", and focus input when click the label, here is the code work in react

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

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

Answer 4

I just solved my similar problem like this:

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
}

Answer 5

In iOS 7, this issue still persists without any of the workarounds working for me.

My solution was to combine the click event with touchend:

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

Some helpful info in this JQuery issue: http://bugs.jquery.com/ticket/5677 Especially the part where it says technically there is no click event on mobile.

Answer 6

We were able to work around this issue at Etsy by simply adding this single line of code to our global javascript file.

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

We are using the xui micro js library and that line simply attaches an empty click handler to all label elements. For some reason, this magically fixes the issue on mobile safari.