模糊的按鍵輸入字段上角

進入我發現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

模糊的按鍵輸入字段上角

回答

相關問題