CODEWITHSUNDEEP
javascripthtmlioscssiphone
user8506374
user8506374

Reputation:

onclick event doesn't work on iphone

I have form which should upload image. each form placed in iframe

<body style="margin: 0; padding: 0; height: 100%; cursor: pointer;" onclick="document.querySelector('.register-upload-input').click()">
   <form method="POST" action="http://127.0.0.1:8000/de/client/registerupload" accept-charset="UTF-8" enctype="multipart/form-data">
      <input class="register-upload-input" style="display: none;" onchange="document.querySelector(".preloader").style.display="block";document.querySelector("form").submit();" accept=".jpg,.jpeg,.png" name="image" type="file">
   </form>
</body

so I click on iframe, file upload dialog appears and I can choose image. body element has onclick event. everything works fine, but when I try to upload images with iphone nothing happens, dialog prompt dosn't show up. it works on android, but doesn't work on iphone. I did research, usually such problem happens cause the element should has cursor: pointer in styles. I added it, but nothings changed

Upvotes: 1

Views: 4567

Answers (2)

cocoa
cocoa

Reputation: 129

Do not set display:none on <input>,you can set height:0px instead.

EDIT:

I checked my note, find that there has been a same question on stackoverflow.

the same question is here.

Three things are causing this problem:

  1. At javascript, removing return false; of event listener.

  2. At the stylesheet, the element which calls the action must have the property cursor: pointer;. Probably Apple put this requirement in these calls for best feedback on user interface.

  3. Again at the stylesheet, we can't setting display: none; for hidden input because some browsers don't accept clicks on elements that aren't displayed.

Upvotes: 1

user8493027
user8493027

Reputation:

Adding the following CSS to the IFrame content.

html, body {
    touch-action: auto;
}

Upvotes: 0

Related Questions