jquery.blur() 引起的 Inprog 操作已在进行中

Question

我有 input field:

<input type="text" id="myId" ns-validate="" class="someClass" ng-model="Date" ng-
focus="focus($event, 'Parameters')" ng-blur="blur($event)" tabindex="-1">

焦点事件绑定到此方法：

scope.focus = function (e, names) {
            scope.dateSet = false;
            $(e.currentTarget).blur();
            $(e.currentTarget).prop('readonly', true).addClass('focus');
        };

如果我注释掉 blur() 不会发生错误，但需要在 IE 上使只读工作。

可能是因为blur事件绑定到这个方法：

scope.blur = function (e) {
            $(e.currentTarget).prop('readonly', false).removeClass('focus');
        };

如果是，为什么这在 IE 中有效但在 Chrome 中失败？

按照评论中的建议，我尝试创建一个指令：

angular.module('xxx').directive('blurChecker', function () {
return function (scope, element, attributes) {
        scope.$watch(attributes.blurChecker, function(){
            element[0].blur();
    })
};
});

添加到 html

blurChecker='true'

没有效果。有什么想法吗？

Answer 1

始终根据指令进行 DOM 操作。这将更好地控制您要操作的 DOM。

在指令中使用 link 函数。因为您还需要更新范围变量。然后将 blur & focus 事件绑定到 link 函数中的元素。当您在焦点上传递 "Parameter" 字符串时。你可以通过在你的元素中提到属性来做同样的事情，比如 parameter="Parameters"

HTML

<input type="text" id="myId" ns-validate="" class="someClass" ng-model="Date" 
blur-checker parameter="Parameters" tabindex="-1">

指令

angular.module('tpmobile').directive('blurChecker', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var parameterName = attrs.parameter; //I don't know what it does here, but you can get parameter name here
            element.on('blur', function(event) {
                element.prop('readonly', false).removeClass('focus');
            });
            element.on('focus', function(e) {
                scope.dateSet = false;
                element.blur();
                element.prop('readonly', true).addClass('focus');
            })
        }
    }
});

希望对您有所帮助。谢谢

jquery.blur() 引起的 Inprog 操作已在进行中

Inprog Action Already In Progress caused by jquery.blur()

javascript

jquery

events

angularjs

angularjs-directive