Hide the soft keyboard on blur, in phonegap

Question

I have an PhoneGap application, it's working properly. The only thing bugging me is the way PhoneGap handles the soft keyboard; it doesn't hide when an input is blur'ed. It does do this in iOS, but it even stays when loading a new page in Android.

I had a look at this: http://wiki.phonegap.com/w/page/27915465/How%20to%20show%20and%20hide%20soft%20keyboard%20in%20Android

and this: https://github.com/phonegap/phonegap-plugins/tree/master/Android/SoftKeyboard

but they both did not work for me, any ideas?

Regards, Erik

Answer 1

The plugin you linked to worked for me (had exactly the same issue):

$("#eingabe").blur(); //for ios
var softkeyboard = window.cordova.plugins.SoftKeyBoard;
softkeyboard.hide();

You probably used Cordova 2.0.0 (or greater) and didn't modify the plugin files (which are written for Phonegap < 2.0).

Here are the updated files (the ones I use):

softkeyboard.js

cordova.plugins = cordova.plugins || {};

cordova.plugins.SoftKeyBoard = {
show: function (win, fail) {
    return cordova.exec(
        function (args) { if (win !== undefined) { win(args); } },
        function (args) { if (fail !== undefined) { fail(args); } },
        'SoftKeyBoard', 'show', []
    );
},

hide: function (win, fail) {
    return cordova.exec(
        function (args) { if (win !== undefined) { win(args); } },
        function (args) { if (fail !== undefined) { fail(args); } },
        'SoftKeyBoard', 'hide', []
    );
},

isShowing: function (win, fail) {
    return cordova.exec(
        function (args) { if (win !== undefined) { win(args); } },
        function (args) { if (fail !== undefined) { fail(args); } },
        'SoftKeyBoard', 'isShowing', []
    );
}
};

SoftKeyBoard.java

package org.apache.cordova.plugins;

import org.json.JSONArray;
import android.content.Context;
import android.view.inputmethod.InputMethodManager;
import org.apache.cordova.api.Plugin;
import org.apache.cordova.api.PluginResult;

public class SoftKeyBoard extends Plugin {
public SoftKeyBoard () { }

public void showKeyBoard () {
    InputMethodManager mgr = (InputMethodManager) cordova.getActivity().getSystemService(Context.INPUT_METHOD_SERVICE);
    mgr.showSoftInput(webView, InputMethodManager.SHOW_IMPLICIT);
    ((InputMethodManager) cordova.getActivity().getSystemService(Context.INPUT_METHOD_SERVICE)).showSoftInput(webView, 0);
}

public void hideKeyBoard() {
    InputMethodManager mgr = (InputMethodManager) cordova.getActivity().getSystemService(Context.INPUT_METHOD_SERVICE);
    mgr.hideSoftInputFromWindow(webView.getWindowToken(), 0);
}

public boolean isKeyBoardShowing() {
    // if more than 100 pixels, its probably a keyboard...
    int heightDiff = webView.getRootView().getHeight() - webView.getHeight();
    return (100 < heightDiff);
}

public PluginResult execute(String action, JSONArray args, String callbackId) {
    if (action.equals("show")) {
        this.showKeyBoard();
        return new PluginResult(PluginResult.Status.OK, "done");
    } else if (action.equals("hide")) {
        this.hideKeyBoard();
        return new PluginResult(PluginResult.Status.OK);
    } else if (action.equals("isShowing")) {
        return new PluginResult(PluginResult.Status.OK, this.isKeyBoardShowing());
    } else {
        return new PluginResult(PluginResult.Status.INVALID_ACTION);
    }
}
}

Modify config.xml

Also make sure that you add the following line in "res/xml/config.xml":

<plugin name="SoftKeyBoard" value="org.apache.cordova.plugins.SoftKeyBoard" />

Answer 2

This worked for me and saved my head from excessive scratching! (also does not need a plugin)

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

The solution was found here, where you can find a non jQuery solution.