In iOS8 Using .Focus() Will Show Virtual Keyboard and Scroll Page After Touch

in iOS8 using .focus() will show virtual keyboard and scroll page after touch

It looks like you're definitely hitting an iOS 8 bug. In iOS7, Safari would (apparently) ignore or keep unfocused elements that had focus set prior to page load. This includes both <input autofocus> and input.focus() that occur up to some point, possibly page load (I tested just with an inline script).

In iOS 8, Safari is now apparently remembering that the element was focussed but not actually focussing it until a touch down event. It is then blindly sending a click event to whichever element received the touch up.

Both browsers behave the same for input.focus() occurring after page load. They both zoom to the element and bring up the keyboard.

Tests:

• input.focus() before page load: http://fiddle.jshell.net/qo6ctnLz/3/show/
• <input autofocus>: http://fiddle.jshell.net/qo6ctnLz/4/show/
• input.focus() after page load: http://fiddle.jshell.net/qo6ctnLz/6/show/

The good news is that you only need to be worried about new behavior on elements you want to prefocus. The other good news is that while you will have to use a user-agent workaround, you can use it for all iOS versions since they were already behaving like you weren't autofocusing:

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
    element.focus();
}

This appears to be the approach http://www.google.com uses based on some basic user-agent testing:

• Mac Book Pro: autofocus before page load.
• iPhone: no autofocus
• iPad: no autofocus
• Kit Kat (Android): focus after page load, possibly doing extra detection for presence of software keyboard.

If you haven't, you should go ahead and file a radar with Apple at https://bugreport.apple.com.

keyboard doesn't open in ios on focus

Programmatic focus using element.focus() doesn't trigger the system-level keyboard to open because WKWebView only shows the keyboard if the focus is initiated by a user.
When the focus is triggered during user script evaluation, it is not considered as user interaction.

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=243416

Changes done by Apple developers here: https://github.com/WebKit/WebKit/pull/2907

The changes are still in beta mode and have not yet been rolled out to the latest iPad OS version.

Safari in ios8 is scrolling screen when fixed elements get focus

This is now fixed in iOS 10.3!

Hacks should no longer be needed.

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

I found a solution which works, although it is a bit ugly. It also won't work in every situation, but it works for me. Since I'm adapting the size of the user interface to the iPad's window size, the user is normally unable to scroll. In other words, if I set the window's scrollTop, it will remain at 0.

If, on the other hand, the keyboard is shown, scrolling suddenly works. So I can set scrollTop, immediately test its value, and then reset it. Here's how that might look in code, using jQuery:

$(document).ready(function(){
    $('input').bind('focus',function() {
        $(window).scrollTop(10);
        var keyboard_shown = $(window).scrollTop() > 0;
        $(window).scrollTop(0);

        $('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
    });
});

Normally, you would expect this to not be visible to the user. Unfortunately, at least when running in the Simulator, the iPad visibly (though quickly) scrolls up and down again. Still, it works, at least in some specific situations.

I've tested this on an iPad, and it seems to work fine.

How to prevent iOS keyboard from pushing the view off screen with CSS or JS

first

<script type="text/javascript">
 $(document).ready(function() {
     document.ontouchmove = function(e){
          e.preventDefault();
          }
 });

then this

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

---

Related Topics