Input focus when animation is done

ionic-v1
1

I use autofocus to set the focus to the first field in my view and to popup the keyboard.
It all works well, only the transition is not very smooth.

When I do not set the focus the transistion is smooth.

So I had the thought, why not wait until the transition/animation is finished and then set the focus to the input?
The only problem is that I have no clue how to achieve that.

Does anyone know how to detect the end of the view transition animations?

Thanks.
Ton

2

You could do this with a directive and then set a time out

.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {

      $timeout(function() {
        element[0].focus(); 
      },750);
    }
  };
});
3

On Android using focus() does not popup the keyboard. I managed to make it work by adding a softkeyboard plugin.

Softkeyboard plugin

Steps:

  • In CMD on Windows navigate to the root of your project.

  • Enter the command “cordova plugin add org.apache.cordova.plugin.softkeyboard”

  • Modify the directive

    .directive(‘focusMe’, function($timeout) {
    return {
    link: function(scope, element, attrs) {
    $timeout(function() {
    element[0].focus();
    cordova.plugins.SoftKeyboard.show();
    },750);
    }
    };
    });

1 Like
4

Awesome, you should try instead Ionic’s keyboard plugin.

It’s basically cordoa’s keyboard plugin except it’s been optimized to work with ionic and out scroll view.

http://ionicframework.com/blog/ionic-keyboard/

5

Ah, thanks. I wasn’t aware of that one. I will give it a try.

6

Fix for iOS:
You had to configure the app for it to be able to show the keyboard through JavaScript. You can add that either in the generated ObjectiveC code after the WebView has loaded.

theWebView.keyboardDisplayRequiresUserAction = NO;

Or you can configure it in config.xml as

<preference name="KeyboardDisplayRequiresUserAction" value="false">

Source: http://stackoverflow.com/questions/12140484/programmatically-show-soft-keyboard-on-iphone-in-a-phonegap-application/