Entrada de foco suelto al instante en Android después de centrarse con javascript

Estoy trabajando en una aplicación iónica con AngularJS.

Tengo pocas entradas (signin / signup stuff) y cuando se pulsa la tecla Enter -go botón en android y equivalente en iOS- que es KeyCode 13 , se centra en la siguiente entrada con ayuda de una directiva personalizada.

Funciona perfectamente bien en el navegador web, pero en el teléfono, se centra la siguiente entrada, entonces el foco se pierde al instante y el teclado se esconden, forzando al usuario a hacer clic de nuevo en la entrada.

Aquí está el HTML :

 <ion-view title="First Screen" hide-nav-bar="true" id="firstScreen" class=" "> <ion-content padding="false" style="background: url(img/XAYpMMdUTvWFVAnrEhUi_restaurant.jpg) no-repeat center;background-size:cover;" class=" manual-remove-top-padding" scroll="false"> <div class=""> <img src="img/awdYDbeeSlSHCToXN5Lw_logo.png" width="auto" height="30%" style="display: block; margin-left: auto; margin-right: auto;"> </div> <label class="item item-input " id="emailInput" name="email"> <input class="invisible-input" type="email" placeholder="Email" ng-model="user.email" focus-me="currentInput == 0" ng-keyup="inputKeyEvent($event, 0)"> </label> <label class="item item-input " id="passwordInput" name="password"> <input class="invisible-input" type="password" placeholder="Mot de passe" focus-me="currentInput == 1" ng-model="user.password" ng-keyup="inputKeyEvent($event, 1)"> </label> <label ng-show="isSignUp" class="item item-input " ng-class="{'animated fadeInLeft': isSignUp, 'animated fadeOutLeft' : !isSignUp && changed }" id="confirmPasswordInput" name="password"> <input class="invisible-input" type="password" placeholder="Confirmation du mot de passe" focus-me="currentInput == 2" ng-model="user.confirmation" ng-keyup="inputKeyEvent($event, 2)"> </label> <div> {{response}} </div> <div class="actionButtonContainer"> <button ng-click="signin()" id="loginButton" class=" button button-balanced button-full">Se oonnecter</button> <button ng-click="signup()" id="signupButton" class=" button button-energized button-full" ng-disabled="disableSignUp()">S'inscrire</button> </div> </ion-content> 

Aquí está la directiva :

 directive('focusMe', function() { return { link: function (scope, element, attrs) { scope.$watch(attrs.focusMe, function (value) { if (value === true) { element[0].focus(); } }); } }; 

Y aquí están los métodos del controlador que está involucrado:

 $scope.inputKeyEvent = function(event, inputId) { $scope.response = event.keyCode; if (event.keyCode == 13) { $scope.currentInput = inputId + 1; if ($scope.currentInput == 2 && !$scope.isSignUp) $scope.signin(); else if ($scope.currentInput == 3 && $scope.isSignUp) $scope.signup(); } } 

Gracias por tu ayuda !

EDITAR

El problema era mi emulador genymotion, funciona perfectamente en el teléfono real (al menos el mío).

Creo que deberías llamar al método blur() antes en el elemento desenfocado. Lo he hecho en iónico y cordova y funciona perfectamente.

También, envuelva el focus() en el siguiente elemento en un timeout ( $timeout para la versión angular o setTimeout para vanillajs) para que el enfoque se ejecute en otro ámbito y después de que se haya completado el desenfoque.

Deberías tener algo como esto:

 $scope.inputKeyEvent = function(event, id) { // prevent default event.preventDefault(); // blur on the unfocused element event.target.blur(); // focus on next element // wrapped in timeout so it will run // in "another thread" $timeout(function() { // If you want to follow all angular best practices // Make a broadcast and read the event in the link function // of your directive var obj = document.getElementById(nextId); // Check if object exists if(obj) { obj.focus(); } }); } 

Hice un ejemplo plunkr y con mi Samsung S5 funciona. No hay un problema como usted describe en su pregunta. Después de presionar la tecla (13) el salto de enfoque al elemento de entrada siguiente con nuestro teclado oculto o algo así.

Tal vez sea algo con las versiones. No lo probé con una aplicación compilada. He abierto el plunkr con mi teléfono inteligente. Echale un vistazo. Tal vez tengas alguna pista.

Https: //plnkr.co/edit/R8uRlzQpfSg7w37nKEKH?p=preview

(¿Por qué no es posible publicar un enlace de plunkr más ???)

  • PhoneGap 3.3 y la aplicación HTML de Mobile Services en Android
  • Emulando ubicación geográfica en Chrome con movimiento
  • Pasar y devolver los valores de javascript y android y utilizarlos como plugin de brecha de teléfono
  • Jquery móvil - keydown keydown en dispositivos móviles
  • PhoneGap + API de Google Maps v3: no se muestra (en absoluto) en Android
  • Folleto (OSM) en Córdoba
  • `Preload.js` no ha podido cargar algunos archivos en dispositivos Android
  • JavascriptInterface llamado pero no mostrando Toast
  • Youtube iframe API - Android en pantalla completa
  • Phonegap: Mientras arrastra la pantalla se borra en Android Jelly bean
  • ¿Google Chrome beta para la carga del archivo de soporte de Android con el atributo webkitdirectory?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.