Focus is not working


#1

Hello,
I’m working on an IOS app.
I have to move the focus from an input field to another when clicking on the “return” button. It’s working when I test with Chrome but not in the IOS simulator.

I tried calling the fucus in 2 different ways:

  $scope.goToPassword = function() {
    document.querySelector("#login input[type=password]").focus();
    angular.element("#login input[type=password]").trigger('focus');
  };

My HTML code:

<input type="email" placeholder="Email address" ng-model="data.username" ng-keypress="($event.which === 13) ? goToPassword() : false" />
<input type="password" placeholder="Password" ng-model="data.password" />

Thanks for your help!


#2

can anyone help with this please?


#3

Hey bractar, the below method work for me:

Write a service,

    xxx.factory('Focus',function($timeout){
        return function(id) {
          $timeout(function(){
            var element=document.getElementById(id);
            if (element) element.focus();
          },0)
        }
    })

Then simply inject the service and give the id:

Focus('input');

Will do the work.
Hope this helps, it is simply wrapping the function in a $timeout to trigger an angular digest.


#4

Hi windht,
thanks but I’m still having the same issue with this code.
It works fine in the browser but not in the IOS simulator.


#5

I just found the solution.
It’s explained here: http://www.sencha.com/forum/showthread.php?291667-Cordova-Problem-keyboard-with-input-focus

The file platforms/ios/cordova/defaults.xml needs to have this line <preference name="KeyboardDisplayRequiresUserAction" value="false" />
instead of <preference name="KeyboardDisplayRequiresUserAction" value="true" />


#6

Glad you find the solution! Indeed this is also something I never noticed! Thank you for your sharing!