Trying to keep the keyboard open after tapping "Send". The keyboard gets "jumpy"

So I am trying to re-focus the field right after clicking “Send” so the keyboard is always up. This is my directive:

.directive('focusMe', function($timeout, $parse) {
    	return {
        	link: function(scope, element, attrs) {
        		var model = $parse(attrs.focusMe);
        		scope.$watch(model, function(value) {

            		if(value === true) {
                		$timeout(function() {
                    		element[0].focus();
                		});
            		}
        		});

        		element.bind('blur', function() {
            		scope.$apply(model.assign(scope, false));
        		});
        	}
    	};
	})

My template:

<input type="text" ng-click="sendMessage" focus-me="focusOnMe">

My controller:

$scope.sendMessage = function() {
      $scope.focusOnMe = true;
}

So whenever I tap “Send” the keyboard slides down (blur) like 10 pixels and then slides back up (focus). It feels like there is a very small delay between these two events so it makes the keyboard “jump”. Is there anything I can do to make it work smoother?

Hi,

I wrote this directive to keep focus on an input.
I didn’t get trouble but I didn’t test a lot…
You could try it :

// keep focus on input while keyboard is open
.directive('focusOnKeyboardOpen', function($window){
  'use strict';
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      var keyboardOpen = false;
      // require cordova plugin https://github.com/driftyco/ionic-plugins-keyboard
      $window.addEventListener('native.keyboardshow', function(e){
        keyboardOpen = true;
        element[0].focus();
      });
      $window.addEventListener('native.keyboardhide', function(e){
        keyboardOpen = false;
        element[0].blur();
      });

      element[0].addEventListener('blur', function(e){
        if(keyboardOpen){
          element[0].focus();
        }
      }, true);
    }
  };
})
1 Like

Using this, my keyboard jitters up and down when refocusing.
So exactly the issue OP is experiencing.
How to avoid that?

Not the best solution (I mixed jquery & angular), but it does its job:

in template

<input type="text" id="message" placeholder="Type your message..." ng-blur="onBlur()">

in controller.js

$scope.onBlur = function() {
            if ($scope.visible) {
                $('#message').focus();
            }
        };

@pink_tshirt I implemented your query solution and the keyboard still jitters for me. Any advice?