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.
- Abrir desplegable desde javascript
- Hacer el botón de llamada telefónica en la página Web de Android
- ¿La alerta no aparece desde la vista web en android?
- ¿Es posible conectar la API de Google Maps a través de proxy inverso en mi aplicación?
- Cómo obtener valores de textarea de html en Android
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).
- Cordova / Phonegap Plugins para Blackberry
- Aplicación desordenada en el teclado emergente
- ¿Cómo resaltar el texto permanentemente en la vista web de Android?
- Android: la aplicación Web funciona en Chrome, pero no en Webview
- No hay eventos de pulsación de teclas para determinadas teclas en el navegador de Android
- Práctica recomendada para la autorización / acción de Facebook en dispositivos móviles sin complementos
- Titanium: cifrado de datos y técnicas de descifrado en dispositivos Android
- Vista web de Android, cargando archivo javascript en la carpeta de activos
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 ???)
- Cómo publicar datos utilizando el método POST en Android
- ¿Por qué el nombre de archivo xml de android debe contener sólo letras minúsculas y dígitos ()?