onclick event doesn't work on iphone
Question
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
2 answers
solution1
1 ACCPTED 2017-10-11 07:27:43
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:
At javascript, removing return false; of event listener.
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.
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.
solution2
0
Adding the following CSS to the IFrame content.
html, body {
touch-action: auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.