在Angular上的按键输入上模糊输入字段

coo*_*ita 25 blur angularjs

当有人按下"回车"键时,我发现这个问题对于提交表格非常有用:

Javascript:

angular.module('yourModuleName').directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'event': event});
                });

                event.preventDefault();
            }
        });
    };
});
Run Code Online (Sandbox Code Playgroud)

HTML:

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>
Run Code Online (Sandbox Code Playgroud)

我想知道的是,当按下"enter"键时,将字段设置为模糊.什么doSomething()看起来模糊发件人字段?

我想保留ngEnter指令,因为我想将它重新用于其他功能.

更新:我知道我可以创建一个完整的指令只是为了模糊(这就是我现在的方式),但我想做的是能够做这样的事情:

<input type="text" ng-enter="this.blur()">
Run Code Online (Sandbox Code Playgroud)

或者如何将当前元素作为参数传递?

<input type="text" ng-enter="doBlur(this)">
Run Code Online (Sandbox Code Playgroud)

Sol*_*gon 27

在尝试了很多东西之后,这似乎是不可能的,因为你需要传递$ event来获取目标元素,所以单独的指令似乎是唯一的方法:

我们想要什么:

您无法传递,this因为它引用了范围,因此您需要传递事件.

<input type="text" ng-enter="doBlur($event)">
Run Code Online (Sandbox Code Playgroud)

一旦你有了这个事件,你就可以从中获得目标.

$scope.doBlur = function($event){
    var target = $event.target;

    // do more here, like blur or other things
    target.blur();
}
Run Code Online (Sandbox Code Playgroud)

但是,你只能在像ng-click这样的指令中获得传递事件......有点不满意.如果我们可以传递$ event outside指令,我们可能会以您请求的可重用方式模糊.

  • 我不想这么说,但在这种情况下 jQuery 似乎更容易使用 (2认同)

Ale*_*cyn 5

对于 Angular 2+

<input ... (keydown.enter)='$event.target.blur()'>
Run Code Online (Sandbox Code Playgroud)