使用javascript聚焦后立即在Android上输入松散焦点答案

【问题标题】：Input loose focus instantly on Android after focused with javascript使用javascript聚焦后立即在Android上输入松散焦点
【发布时间】：2016-05-22 19:14:24
【问题描述】：

我正在使用 AngularJS 开发 Ionic 应用程序。

我的输入很少（登录/注册），当按下 Enter 键时 - android 上的 go 按钮和 iOS 上的等效按钮 - KeyCode 13，它会在自定义指令的帮助下专注于下一个输入。

它在网络浏览器上运行良好，但在手机上，它会聚焦下一个输入，然后焦点会立即丢失，键盘会自行隐藏，迫使用户再次点击输入。

这里是 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>

这是指令：

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

这里是涉及的控制器方法：

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

感谢您的帮助！

编辑

问题出在我的 genymotion 模拟器上，它确实可以在真机上完美运行（至少是我的）。

【问题讨论】：

抱歉跑题了，但为了以后参考，动词是“输”：grammarist.com/usage/loose-lose

标签： javascript android angularjs ionic-framework

【解决方案1】：

我认为您应该在未聚焦的元素上调用blur() 方法。我已经在 ionic 和 cordova 中完成了它，并且效果很好。

另外，将focus() 包裹在timeout 中的下一个元素（$timeout 用于角度版本或setTimeout 用于 vanillajs），以便焦点将在另一个范围内执行，并且在模糊完成后。

你应该有这样的东西：

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

    });
}

【讨论】：

好吧，我已经发现输入切换焦点符合预期，但问题似乎是进入/执行按钮的默认行为仍在触发
问题出在模拟器上。刚刚在我的手机上测试了它，它可以工作。
你试过旧的安卓手机吗？ focus 有时会出现一些问题，这就是我们之前使用 blur 的原因

【解决方案2】：

我做了一个 plunkr 示例，并在我的三星 S5 上运行。没有像您在问题中描述的问题。在我按下 key(13) 后，焦点会跳转到下一个输入元素，而无需隐藏键盘或类似的东西。

也许它与版本有关。我没有使用构建的应用程序对其进行测试。我必须用我的智能手机打开 plunkr。看看这个。也许你会得到一些提示。

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

（为什么不能再发布plunkr链接？？？）

【讨论】：