Geben Sie los Fokus sofort auf Android nach mit Javascript fokussiert

Question

Ich arbeite an einer Ionic App mit AngularJS.

Ich habe ein paar Eingaben (signin/signup stuff) und wenn Enter-Taste -go-Taste auf Android und gleichwertige auf iOS-die KeyCode 13 ist, es konzentriert sich auf die nächste Eingabe mit Hilfe einer benutzerdefinierten Anweisung.

Es funktioniert perfekt im Webbrowser, aber auf dem Telefon, es konzentriert die nächste Eingabe, dann ist der Fokus sofort verloren und die Tastatur versteckt sich selbst, zwingt den Benutzer erneut auf die Eingabe klicken. Hier

ist die 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> 

Hier ist die Richtlinie:

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

Und hier ist die Controller-Methoden, die beteiligt ist:

$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(); 
    } 
} 

Vielen Dank für Ihre Hilfe!

EDIT

Das Problem war mein genymotion Emulator, es perfekt auf realen Telefon funktioniert (zumindest mir.)

Answer 1

Ich glaube, Sie blur() Methode, bevor sie auf dem unfokussiert Element nennen sollte. Ich habe es in ionischen und Cordova gemacht und es funktioniert perfekt.

auch, wickeln Sie die focus() auf nächstes Elemente in einem timeout ($timeout für abgewinkelte Ausführung oder setTimeout für vanillajs), so wird der Fokus in einem anderen Umfang ausgeführt werden und nach der Unschärfe abgeschlossen hat.

Sie sollten etwas davon haben:

$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(); 
     } 

    }); 
} 

Answer 2

ich ein plunkr Beispiel und mit meinem Samsung S5 machte es funktioniert. Es gibt kein Problem, wie du es in deiner Frage beschrieben hast. Nachdem ich die Taste (13) gedrückt habe, springt der Fokus zum nächsten Eingabeelement ohne Tastatur oder ähnliches.

Vielleicht ist es etwas mit den Versionen. Ich habe es nicht mit einer gebauten App getestet. Ich öffne den Plunkr mit meinem Smartphone. Hör zu. Vielleicht bekommst du einen Hinweis.

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

(Warum ist es nicht möglich, eine plunkr link to post mehr ???)