web-dev-qa-db-ja.com

キーを押して入力フィールドをぼかすEnter on Angular

この質問 誰かが「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>
_

私が知りたいのは、「enter」キーが押されたときにフィールドがぼやけるように設定することです。 doSomething()は、送信者フィールドをぼかすように見えるでしょうか？

ngEnterディレクティブはそのままにしておきます。他の関数で再利用したいからです。

Update：ぼかすためだけにディレクティブ全体を作成できることは知っています（それが今のやり方です）が、私がやりたいことは次のようなことができます：

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

または、現在の要素をパラメーターとして渡すにはどうすればよいですか？

_<input type="text" ng-enter="doBlur(this)">
_
angularjsblur
24
coopersita

たくさんのことを試した後、ターゲット要素を取得するために$ eventを渡す必要があるため、これは不可能のようです。そのため、別のディレクティブが唯一の方法であるようです。

私たちが望むもの：

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-clickなどのディレクティブでのみパスイベントを取得できます...ちょっと不満足です。ディレクティブの外で$ eventを渡すことができれば、リクエストした再利用可能な方法でぼやけることがあります。

26
SoluableNonagon

SoluableNonagon は非常に近かった。正しい引数を使用する必要があります。ディレクティブは、_$event_ではなくeventとしてイベントパラメーターを宣言しました。 ngClickと同じように_$event_を使用するようにディレクティブを変更できます（または、それを保持して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>_
4
hansmaad

for Angular 2+

<input ... (keydown.enter)='$event.target.blur()'>
2
Aleksandr Skobeltcyn