search

amsul / pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
http://amsul.ca/pickadate.js
MIT License
7.7k stars 1.01k forks source link

iOS Keyboard #1133

Closed MatthewKennedy closed 4 years ago

MatthewKennedy commented 5 years ago

When you click in the date field, as the date picker is opening the iOS keyboard appears and then disappears on the bottom of the screen, this plays havoc with body scroll lock.

DanielRuf commented 5 years ago

Hi, can you provide a codepen so we can reproduce this and provide more info about the pickadate version that you use?

MatthewKennedy commented 5 years ago

Hi @DanielRuf

I can't really as its an iOS only issue, but if you visit the https://amsul.ca/pickadate.js/date/ page in an iOS device click any of the date fields and look at the bottom of the screen you'll see the iOS keyboard appear then disappear.

MatthewKennedy commented 5 years ago

if you add onfocus="blur();" to the input field this prevents the flash of keyboard opening on iOS.

MatthewKennedy commented 5 years ago

<input type="text" class="datepicker" onfocus="blur();" />

MatthewKennedy commented 5 years ago

Instead of using the javascript to remove readonly="readonly" add readonly="readonly" aria-readonly="true" onfocus="blur();" to the target input element and no flash of keyboard on iOS, everything still works grand.