Hide Keyboard on submit?

ionic-v1
1

Does the keyboard slide down by default when a form is submitted using ng-submit?
I seem to be having the exact opposite problem of this guy here:

Reading his post it sounds like the keyboard is doing exactly what I want it to do - sliding down on submit.

But when using the ios emulator and I press enter the keyboard stays visible, and I have to use the “Done” button to dismiss it. Am I missing something obvious?

<form ng-submit="search(name)">
    <input type="search" ng-model="name">
 </form>
2

Have you installed our keyboard plugin?

This should give you access to the keyboard api and let you hide it on tap

3

Thanks for the reply! Sorry, missed that somehow. It sounds exactly what I’m after, I just can’t seem to get it installed/working. I’m just extending the “Getting Started” app so downloaded the ionic-plugins-keyboard-master acrhive, unzipped to myApp/plugins, added

<feature name="Keyboard">
            <param name="ios-package" value="IonicKeyboard" onload="true" />
</feature>

in the myApp/config.xml file, and placed a call to Keyboard.close() in my search function run from the ng-submit.

Sorry for the beginner questions, spent a few hours putting it in different folders, renaming things etc, but thought I better stop and ask for help before I screwed something up :smile:

1 Like
4

Ah, don’t put the call to close the keyboard in the config.xml. That call should be in your controller, specifically in the function that you have for you ng-click function.

5

Haha, yeah that’s exactly where I put it - in the search() function which is in the controller :smile:

Sorry, my bad, my explanation probably wasn’t very clear.

Just to go through the steps…

  1. I copied the complete downloaded ‘ionic-plugins-keyboard-master’ folder to myApp/plugins/

  2. Add the following to myApp/config.xml

  1. Finally inside my controller, I added a call to the ‘Keyboard.close()’ function to my own search function. In Chrome running simpleHTTP server, I get an error saying the Keyboard.close() function isn’t defined. In the ios simulator, I can’t see anything useful…

Any suggestions?

6

Well nothing will happen in chrome, but it should work on the simulator. Do you mind post the controller?

7

Sorry about all the questions, complete beginner here. So my plugin installation method is correct?

Here’s my controller…

.controller('FriendsCtrl', function($scope, Friends, Current) {
$scope.friends = Friends.all();
//Storing results in factory current so the results are displayed until user performs new search.
$scope.currentList = Current.all();

$scope.results = function(searchTerm){

Keyboard.close();

$scope.currentList.length = 0;

for(var i = 0; i <= $scope.friends.length-1 ; i++){		
  var compareThis = $scope.friends[i].name;

  if (compareThis.indexOf(searchTerm) >=0){
		$scope.currentList.push($scope.friends[i]);
	}
}
}

})
8

Don’t worry, got it sorted. I didn’t have the plugin installed correctly :blush:

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

was the answer I was after. Thanks anyway!

9

Sorry about not getting back to you, but I’m glad to hear you got it taken care of :smile:

10

@mhartington
In the ionic keyboard plugin documentation, it says cordova.plugins.Keyboard.close(); is only supported for IOs.

Is it possible to hide the keyboard on Android as well, because it remains open if a user submit a form without closing the keyboard (he scrolls down to find the submit button without closing the keyboard).

Thanks a lot!!

11

Seems to be possible, but you would need to dive into some java and create it.

But I can bring it up to the devs and see what their thoughts are about doing this.

Another, maybe quick fix would be to blur on inputs that have focus when you press submit.

document.activeElement.blur();

7 Likes
12

Just to let you guys know,
I have installed this plugin :

It works fine.

Usage

    SoftKeyboard.show() to show the keyboard
    SoftKeyboard.hide() to hide it
    Keyboard visible callback: SoftKeyboard.isShowing(function(){ console.log('success'); }, function(){ console.log('fail'); })

BTW: To have callback for hiding and showing the keyboard you can use: "showkeyboard" / "hidekeyboard" events wich are not mentioned in the docs.

Would be awesome if it was implemented in the ionic keyboard plugin :smiley:.
:sunny:
:

13

This does not seem to work for me, i’ve added the plugin and when the keyboard is open and I run following code it logs it as closed:

       SoftKeyboard.isShowing(function(isShowing){
            if (isShowing) {
                console.log('soft keyboard open');
            } else {
                console.log('soft keyboard closed');
            }
        }, function(){
            console.log('error');
        });
14

I definitely switched to the ionic keyboard plugin that now fully support android & ios keyboard’s hide function.

15

Thank you! This work for me.

16

document.activeElement.blur(); is worked. But it will be so great if anyone explain how does it work? anyway Thank you a lot.

17

document.activeElement.blur(); works fine for me, thank you!