Nhập tập trung lỏng ngay lập tức trên Android sau khi tập trung với javascript

Question

Tôi đang làm việc trên Ứng dụng Ionic với AngularJS.

Tôi có vài đầu vào (công cụ đăng nhập/đăng ký) và khi phím Enter được nhấn nút -go trên Android và tương đương trên iOS- là KeyCode 13, nó tập trung vào đầu vào tiếp theo với trợ giúp chỉ thị tùy chỉnh.

Nó hoạt động hoàn hảo trên trình duyệt web, nhưng trên điện thoại, nó tập trung đầu vào tiếp theo, sau đó tiêu điểm bị mất ngay lập tức và bàn phím tự ẩn, buộc người dùng nhấp lại vào đầu vào.

Đây là 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> 

Đây là chỉ:

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

Và đây là phương pháp điều khiển đó là tham gia:

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

Cảm ơn sự giúp đỡ của bạn!

EDIT

Vấn đề là giả lập genymotion của tôi, nó hoạt động hoàn hảo trên điện thoại thật (ít nhất là tôi.)

Answer 1

Tôi nghĩ bạn nên gọi blur() phương pháp trước đó trên các yếu tố không tập trung. Tôi đã thực hiện nó trong ionic và cordova và nó hoạt động hoàn hảo.

Ngoài ra, quấn focus() trên phần tử tiếp theo trong một timeout ($timeout cho phiên bản góc hoặc setTimeout cho vanillajs) để tập trung sẽ được thực hiện trong phạm vi khác và sau khi đã hoàn thành mờ.

Bạn nên có một cái gì đó như thế này:

$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

tôi đã thực hiện một ví dụ plunkr và với Samsung S5 của tôi nó hoạt động. Không có vấn đề gì giống như bạn mô tả trong câu hỏi của bạn. Sau khi tôi nhấn phím (13) chuyển tiêu điểm sang phần tử nhập tiếp theo bằng bàn phím ẩn hoặc thứ gì đó tương tự.

Có thể một cái gì đó của nó với các phiên bản. Tôi đã không thử nghiệm nó với một ứng dụng được xây dựng. Tôi mở plunkr bằng điện thoại thông minh của mình. Kiểm tra nó ra. Có lẽ bạn nhận được một số gợi ý.

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

(Tại sao nó không thể đăng một liên kết plunkr nữa ???)