iPad Safari - Make Keyboard Disappear

iPad Safari - Make keyboard disappear

I found the solution for this at http://uihacker.blogspot.com/2011/10/javascript-hide-ios-soft-keyboard.html. Essentially, just do this (it worked for me):

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};

Can you show/hide the iPad Safari keyboard using JavaScript?

I just ran into a very similar problem, not sure if my solution will work for you.

In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.

To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.

Hope this helps!

Force Hide keyboard in iPad Safari

you can try to focus() on a non-text element.

or

$("#yourTextField").blur(); //jquery

hide keyboard in iphone safari webapp

Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()

Safari for iPad: How to hide the Autofill Bar above the keyboard?

As far as I know, this is a feature of Mobile Safari which is under the control of the end user, and cannot be enabled/disabled by your application.

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.

iOS iPad Fixed position breaks when keyboard is opened

I really like this solution (http://dansajin.com/2012/12/07/fix-position-fixed/). I packaged it up into a little jQuery plugin so I could:

• Set which parent gets the class
• Set which elements this applies to (don't forget "textarea" and "select").
• Set what the parent class name is
• Allow it to be chained
• Allow it to be used multiple times

Code example:

$.fn.mobileFix = function (options) {
    var $parent = $(this),

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

EDIT: Removed unnecessary element

hide keyboard on ios device when focus in input

If you need a pure javascript solution, use this line :

document.activeElement.blur();

This line removes the focus on the active element and hiding the keyboard.

---

Reference

• MDN document.activeElement
• MDN HTMLElement.blur

---

Related Topics