【问题标题】:Why doesn't jqLite focus first time in my code?为什么 jqLit​​e 不在我的代码中第一次关注?
【发布时间】:2015-04-28 15:27:49
【问题描述】:

我有一个指令来自动聚焦下一个输入,如下所示。该项目是 Ionic 的 angularJs。它适用于另一个项目(基于phonegap - 不是离子),但在这个离子项目中它不是在玩球。标记是相同的。

(function() {
'use strict';
angular.module('appname.directives')
    .directive('focus', [function() {
    return {
        restrict: 'A',
        link: function($scope,elem) {

            //after character keypress the focus switches to the next input
            elem.bind('keyup', function(e) {

                if (e.keyCode >= 48 && e.keyCode <= 90 || e.keyCode >= 96 && e.keyCode <= 105) {

                    if (elem[0].value !== "") {
                        if (elem.nextAll('input') && elem.nextAll('input').length > 0) {
                            elem.nextAll('input').first().focus();    
                        } else {
                            elem.parent().parent().nextAll(".module__inner").first().find('input').first().focus();    
                        }        
                    }
                } 
            });
        }
    };
}]);
})();

html 看起来有点像下面:

    <div class="input-holder">
      <input data-order="1" focus />
      <input data-order="2" focus />
      <input data-order="3" focus />
    </div>

奇怪的是,在调试中我可以看到执行该行的代码 "elem.nextAll('input').first().focus();"

这确实会按下本机键盘,但不会关注下一个输入。奇怪的是,当我“制表”到下一个输入时,指令会起作用,我可以回到第一个输入,它会按预期自动制表。

在绑定指令方面,我可以调试并看到它正在触发,因此它不会是与此相关的问题。 HTML 是静态的,因此不存在事件委托问题。

我对此感到困惑,唯一让我回想起的是最初的 .focus() 似乎并没有真正聚焦,而且每隔一次它都会聚焦。

我尝试将它包装在 $timeout 和 $scope.$apply() 中,但似乎不起作用。

有人知道我可以尝试什么吗?


编辑


奇怪的是,当我的 Chrome 开发工具未打开时,它可以正常工作。它也不适用于设备。除了执行周期可能较慢之外,我看不出这里有什么不同?

【问题讨论】:

  • 您可能需要运行摘要循环..同时处理事件
  • 你试过使用ng-keyup吗?
  • @pankajparkar 你的意思是使用 $scope.$apply()/$timeout?我试过了
  • @charlietfl 我没有,但是检测到了该事件,所以我不认为就是这样。

标签: jquery angularjs cordova ionic-framework jqlite


【解决方案1】:

我在设备上遇到了类似的问题。

如果您使用的是 Ionic + AngularJS,那么您需要在 config.xml 中添加 Ionic Keyboard 插件和这些首选项

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

<feature name="Keyboard">
  <param name="ios-package" value="IonicKeyboard" onload="true" />
</feature>

KeyboardDisplayRequiresUserAction 首选项是阻碍焦点功能的首选项。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-01-13
    • 2021-10-18
    • 2016-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多