Prevent Keyboard from closing

Question

I am struggling a little bit with this implementation. I'm building my first Hello World! android(cordova) application that requires a keyboard to show always and avoid hiding it like when the user clicks the back button or any other input.
Why? basically I don't have any input element in my HTML to trigger a focus & show the keyboard, it's kind of a 'terminal emulator' where the user performs certain commands.
The keyboard wasn't showing at all so I went and I added the following:

Installed Ionic Keyboard plugin

cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

Added a Permission to config.xml

 <feature name="Keyboard">
    <param name="android-package" value="com.ionic.keyboard.IonicKeyboard" />
    <param name="onload" value="true" />
</feature>

In my App module, the following lines :

var myApp = angular.module('myApp', ['ionic']);

myApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {

        if(window.cordova && window.cordova.plugins.Keyboard) {
            window.cordova.plugins.Keyboard.show(); // Show Keyboard on startup

// and here Trigger a show keyboard when hidden
            window.addEventListener('native.hidekeyboard', keyboardHideHandler); 

            function keyboardHideHandler(e){
                window.cordova.plugins.Keyboard.show();
            }

        }
    });
});

Now, the above implementation works but I do not think it is elegant to handle it this way and I don't like the feel that the keyboard closes then pops up again.

• Is there an alternative way besides Ionic keyboard's plugin to configure my android app to show keyboard all the time?
• Is this the correct way doing it with Cordova/Ionic frameworks?

Hope I am on the right track.Any hints would be appreciated.

Thank you

Screenshots

Answer 1

Well, I think I came up with a different way, still not sure if this is how it should be handled.

Add an event listener on Taps

myApp.directive('detectGestures', function ($ionicGesture) {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
        var gestureType = attrs.gestureType;
        switch (gestureType) {
            case 'doubletap':
                $ionicGesture.on('doubletap', scope.reportEvent, elem);
                break;
    }}}
});

Then in My Controller, If keyboard is Visible close else Show

$scope.reportEvent = function (event) {
      if (event.type == 'doubletap') {
          $timeout(function () {
              if (window.cordova && window.cordova.plugins.Keyboard) {
                  if(cordova.plugins.Keyboard.isVisible){
                      window.cordova.plugins.Keyboard.close();
                  } else {
                      window.cordova.plugins.Keyboard.show();
                  }

              }
           }, 500);
         }
      };

Let me know what you think.
Thanks!

Answer 2

EDIT: I think the standard way to do it is here: https://stackoverflow.com/a/1510005/1091751. This won't prevent it from closing when the backbutton is pressed however, you could try editing the actual Cordova Android files in platforms/android to override the following method (taken from https://stackoverflow.com/a/6571093/1091751):

@Override
public boolean onKeyPreIme(int keyCode, KeyEvent event) {
    if(keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_UP) {
        InputMethodManager manager = (InputMethodManager) this.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
        manager.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
    }
    return false;
}

---

I haven't tested this out, but what if you add a hidden input that you focus initially when your app loads and then constantly refocus it when it loses focus? I'm not sure this will look any different than explicitly calling keyboard.show(), but it might prevent the keyboard opening/closing jitter.

Something like:

<input constant-focus id="hiddenFocus" type="hidden">

and then

document.getElementById('hiddenFocus').focus()

then constantly refocus it to keep the keyboard up: // HTML tag = constant-focus

 .directive('constantFocus', function(){
      return {
        restrict: 'A',
        link: function(scope, element, attrs){

          element[0].addEventListener('focusout', function(e){
            element[0].focus();
          });
        }
      };
    })