Detecting ipad quirk with showing the keyboard on focus

Question

I wrote a function that will auto-advance a user to the next field of a form once they satisfy the requirements of that field.

My problem is that when using this in an iPad, instead of focusing the next field it just hides the keyboard.

I have given up trying to fix this and am looking for a way to detect this.... trying to be a purest and not use browser detection but don't see an alternative.

Anyone have a FEATURE DETECTION method for this?

I'd suggest *NOT* auto advancing the field. In other words, the fix is really a user experience fix, rather than a code fix. Auto-advancing can be quite confusing since it's not an expected behavior, and any perceived benefits of auto-advancing are minimized on a touch device anyways. — DA., Jun 26 '12 at 21:17
FYI, the keyboard is part of the OS, so not something you have direct control over in the DOM. — DA., Jun 26 '12 at 21:19
Auto-advance was not my choice. I would prefer to use a mask. — dovidweisz, Jun 27 '12 at 14:23
I understand that we are often given specifications that we have to implement even though they are bad ideas or, at times, actually impossible to implement. I wish you luck! — DA., Jun 27 '12 at 19:29

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

According to Apple's Safari Web Content Guidelines under Form and Document Events, there is no event triggered specifically for the keyboard. That doesn;t mean that isn;t an internal WebKit event that you could tap into though...

This question has an answer that provides a pretty novel solution for sniffing out the keyboard: iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Essentially it tries to set the scroll position of the window; if the position doesn't change, then the keyboard is present.

Here is cleaned up version of the code:

$(document).ready(function(){
    $('input').focus(function(){
        var scrollPosition = $(window).scrollTop();
        $(window).scrollTop(10);
        var isKeyboard = ($(window).scrollTop() > 0);
        $(window).scrollTop(scrollPosition);

        alert(isKeyboard);
    });
});

That should at least give you an idea of the concept :)

edited May 23 '17 at 12:27

Community

1
1

answered Jun 26 '12 at 21:14

Andrew Odri

8,868
5
46
55

Here is another reference that may be helpful as well: http://stackoverflow.com/questions/7481465/what-is-the-mobile-safari-event-for-the-on-screen-keyboard-closing – Andrew Odri Jun 26 '12 at 21:18
Youmay be btr off just sniffing for iOS as well P http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3 – Andrew Odri Jun 26 '12 at 21:23
Andrew: Looks like that's what I'm gonna have to do :( – dovidweisz Jun 27 '12 at 14:24
The code might be better if it only tried to shift the scrollTop a few pixels? Couldn't this cause scroll jitter e.g. if using an external keyboard? – robocat Nov 06 '12 at 23:12

Detecting ipad quirk with showing the keyboard on focus

1 Answers1