模糊的按键输入字段上角

进入我发现this question当有人按下 “Enter” 键提交表单非常有用：模糊的按键输入字段上角

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

HTML：

<div ng-app="" ng-controller="MainCtrl"> 
    <input type="text" ng-enter="doSomething()">  
</div>

我想知道的是当按下“回车”键时将字段设置为模糊。 doSomething()看起来会模糊发件人字段？

我想离开ngEnter指令，因为我想重新使用它来执行其他功能。

更新：我知道我可以创造出一个指令只是模糊（这就是我有现在），但我想要做的是能够做这样的事情：

<input type="text" ng-enter="this.blur()">

或者我如何传递当前元素作为参数？

<input type="text" ng-enter="doBlur(this)">

来源

2014-12-01 coopersita

[角JS触发blur事件]（HTTP的可能重复：// stackoverflow.com/questions/23300329/angular-js-trigger-blur-event） – SoluableNonagon 2014-12-01 18:58:26

另外，http://stackoverflow.com/questions/18389527/angularjs-submit-on-blur-and-blur-on-keypress – SoluableNonagon 2014-12-01 18:58:56

@ SoluableNonagon我更新了我的问题，我知道我可以制作一个自定义指令来模糊，但我想保留指令的通用性 – coopersita 2014-12-01 19:49:34

尝试了一堆东西后，这似乎是不可能的，因为你需要通过$事件来获取目标元素，所以单独的指令似乎是唯一的出路：

我们的愿望是：

你不能通过this，因为它指的是范围，所以你需要传递事件。

<input type="text" ng-enter="doBlur($event)">

一旦你有事件，你可以从中获得目标。

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

    // do more here, like blur or other things 
    target.blur(); 
}

但是，你只能得到一个指令传递活动像NG点击...有点不尽人意。如果我们可以在指令之外传递$ event，我们可以以您请求的可重用方式模糊。

来源

2014-12-01 19:53:15 SoluableNonagon

我讨厌这样说，但似乎jQuery在这种情况下更容易使用 – SoluableNonagon 2014-12-01 20:35:33

fantastic..this是完美的.. – Anirudha 2016-03-29 08:55:58

只有当我按照以下代码行传递事件参数时，此解决方案才与我一起工作：'范围。$ eval（attrs.ngEnter，{'event'：event}）;'。非常感谢。 – tarekahf 2016-09-20 21:49:27

SoluableNonagon非常接近它。你只需要使用正确的参数。该指令将事件参数声明为event而不是$event。你可以改变指令使用$event就像ngClick做（或者你把它和使用它作为ng-enter="doSomething(event)"

angular.module("app", []) 
 
    .controller('MainController', MainController) 
 
    .directive('myEnter', myEnter); 
 

 
function MainController() { 
 
    var vm = this; 
 
    vm.text = ''; 
 
    vm.enter = function($event) { 
 
    $event.target.blur(); 
 
    vm.result = vm.text; 
 
    vm.text = ''; 
 
    } 
 
} 
 

 
myEnter.$inject = ['$parse']; 
 

 
function myEnter($parse) { 
 
    return { 
 
    restrict: 'A', 
 
    compile: function($element, attr) { 
 
     var fn = $parse(attr.myEnter, null, true); 
 
     return function(scope, element) { 
 
     element.on("keydown keypress", function(event) { 
 
      if (event.which === 13) { 
 
      
 
      // This will pass event where the expression used $event 
 
      fn(scope, { $event: event }); 
 
      scope.$apply(); 
 
      event.preventDefault(); 
 
      } 
 
     }); 
 
     }; 
 
    } 
 
    }; 
 
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 

 
<div ng-app="app" ng-controller="MainController as view"> 
 
    <input my-enter="view.enter($event)" ng-model="view.text"> 
 
    <div ng-bind="view.result"></div> 
 
</div>

来源

2016-01-21 07:53:42 hansmaad

模糊的按键输入字段上角

回答

相关问题