Some inputfields not clickable on iPad Safari, Ok in other browsers

Michael Borchardt
Michael Borchardt used Ask the Experts™
on
Web developpers, I have a question.

For a client of mine, I put together a little website http://www.ijshoevedeboey.be
There, on the contact form, are multiple input fields ('Naam', 'Emailadres' and 'Onderwerp')

Here's the curiosity (at least for me ;-) I can select 'Naam' and enter data into it, but I cannot select 'Emailadres', nor 'Onderwerp' to enter data - A bummer for a contact form.
Besides that, this only appears to happen on an iPad's Safari.
On the development platform, it works fine (Windows with Chrome, Opera, Opera Neon, Firefox, Edge)

Can someone point me into a direction?

Sincerely,
Borchardt1974
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You'll note that you can use the TAB key to move between these fields but just not click directly.

There are a couple of possible causes
1. Javascript - check that you don't have any JS which clears selecting inputs e.g. "onmousedown" handlers and with a line that reads. .. "return false;"
2. HTML - try NOT to use a <label> as a row wrapper as this is not standard HTML syntax and Safari on iOS is a little more sensitive
Change
 <label class="row">
     <div class="3u 12u(mobile)"><section class="box feature"><input type="text" name="name" id="name" placeholder="Naam" required="required"></section></div>
     <div class="3u 12u(mobile)"><section class="box feature"><input type="email" name="email" id="email" placeholder="Emailadres" required="required"></section></div>
    <div class="3u 12u(mobile)"><input type="text" name="subject" id="subject" placeholder="Onderwerp" required="required"></div>
</label>

Open in new window


To this
<div class="row">
     <div class="3u 12u(mobile)"><section class="box feature"><input type="text" name="name" id="name" placeholder="Naam" required="required"></section></div>
     <div class="3u 12u(mobile)"><section class="box feature"><input type="email" name="email" id="email" placeholder="Emailadres" required="required"></section></div>
    <div class="3u 12u(mobile)"><input type="text" name="subject" id="subject" placeholder="Onderwerp" required="required"></div>
</div>

Open in new window

Michael

Did that resolve it for you?  If so can you let us know and close out this issue.
If not .. provide more detail on what you changed
Michael BorchardtInternational IT Manager

Author

Commented:
Option #2 did the trick! Thanks, learned something ;-)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial