How to hide SoftKeyboard in apache cordova android

Question

I have an old android app developed with cordova and i was not too familiar with it as native java. In my app case when it opened it was displaying a login screen with username, password and Login button and i found the file that handles this functionality was signin.js and code was as below

Ext.define('GBMob.view.Signin',{
    extend: 'Ext.form.Panel',

    requires: [
        'Ext.data.JsonP',
        'Ext.field.Password',
        'Ext.form.FieldSet',
        'GBMob.view.GBHome'
    ],

    config: {

    items: [
    {
        xtype: 'fieldset',
        title: 'User Info',
        instructions: 'Enter Username/Email and Password.',
        maxWidth: 550,

        items: [
        {
            xtype: 'textfield',
            name: 'username',
            label: 'Username'
        },
        {
            xtype: 'passwordfield',
            name: 'password',
            label: 'Password'
        },
        {
            xtype: 'button',
            text: 'Sign in',
            ui: 'confirm',
            padding: 2,
            margin: 15,
            flex: 0.3,

            handler: function() {

                var loadingMask = {
                    xtype: 'loadmask', 
                    message: 'Signing in ...' 
                };

                Ext.Viewport.setMasked(loadingMask);

                var softkeyboard = window.cordova.plugins.SoftKeyBoard;
                softkeyboard.hide();

                username = SigninView.getValues().username;
                password = SigninView.getValues().password;

                Ext.data.JsonP.request({

                    url: 'https://xxxxxx.com/api/login/',
                    scope: this,

                    params: {
                        data:  base64.encode(username.toLowerCase() + ':' + password)
                    },

                    success: function(result) {

                        ........
                        ........
                        ........
                console.log("Signing in with Username: " + username + " and password: " + password);
            }
        }
        ]
    }]
    }
});

So as of now the code was working perfectly, but the problem was after the user entered username and password and clicked on the Sign in button the keyboard was not disappearing and due to which after redirecting to dashboard half of the dashboard page was disappearing(vanishing), i mean only half of the page was visible and half page was blank(may be the previous login screen keyboard portion was making the dashboard half screen invisible/blank white background). So i decided to hide the keyboard immediately after clicking on the Sign in button and hence done the following

1. Searched the keyboard plugin as cordova plugin search keyboard
2. Installed the SoftKeyboard plugin as cordova plugin add org.apache.cordova.plugin.softkeyboard
3. Added the following two lines in signin.js file as mentioned in the above code

var softkeyboard = window.cordova.plugins.SoftKeyBoard;

softkeyboard.hide();

but after add the above two lines i was not able to login at all and the app was displaying just the signing in .... mask continuosly.

So whats wrong with above added two lines of code and what need to do to hide the keyboard immediately after clicking on the button in cordova ?

Does anyone had any idea on how to hide keyboard in cordova ?

Answer 1

Found this function somewhere on stackoverflow to hide the keyboard in android

We need to create a javascript function as below

function hideKeyboard() {
  //this set timeout needed for case when hideKeyborad
  //is called inside of 'onfocus' event handler
  setTimeout(function() {

    //creating temp field
    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    //hiding temp field from peoples eyes
    //-webkit-user-modify is nessesary for Android 4.x
    field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
    document.body.appendChild(field);

    //adding onfocus event handler for out temp field
    field.onfocus = function(){
      //this timeout of 200ms is nessasary for Android 2.3.x
      setTimeout(function() {

        field.setAttribute('style', 'display:none;');
        setTimeout(function() {
          document.body.removeChild(field);
          document.body.focus();
        }, 14);

      }, 200);
    };
    //focusing it
    field.focus();

  }, 50);
}

And just call this anywhere in your js file when needed like

hideKeyboard();