webentwicklung-frage-antwort-db.com.de

Unschärfe eines Eingabefelds bei Tastendruck Enter auf Angular

Ich fand diese Frage sehr nützlich für das Senden eines Formulars, wenn jemand die Eingabetaste drückt:

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>

Was ich gerne wissen möchte, ist das Feld unscharf zu setzen, wenn die Eingabetaste gedrückt wird. Wie würde doSomething() aussehen, um das Absenderfeld zu verwischen? 

Ich möchte die ngEnter-Direktive unverändert lassen, da ich sie für andere Funktionen wiederverwenden möchte. 

Update: Ich weiß, dass ich eine ganze Direktive nur zum Verwischen erstellen kann (so habe ich sie jetzt), aber ich würde gerne so etwas tun:

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

Oder wie übergebe ich das aktuelle Element als Parameter?

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

Nachdem Sie ein paar Dinge ausprobiert haben, scheint dies nicht möglich zu sein, da Sie $ event übergeben müssen, um das Zielelement zu erhalten.

Was wir wünschen:

Sie können this nicht übergeben, da sie sich auf den Bereich bezieht, und Sie müssen das Ereignis übergeben.

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

Sobald Sie das Ereignis haben, können Sie das Ziel davon erhalten.

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

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

Sie können ein Pass-Ereignis jedoch nur in einer Direktive wie ng-click erhalten ... irgendwie unbefriedigend. Wenn wir $ event außerhalb der Direktive übergeben könnten, könnten wir auf die wiederverwendbare Weise verwischen, die Sie angefordert haben.

22
SoluableNonagon

SoluableNonagon war sehr nah dran. Sie müssen nur das richtige Argument verwenden. Die Direktive hat den Ereignisparameter als event nicht $event deklariert. Sie können die Direktive so ändern, dass $event genauso wie ngClick verwendet wird (oder Sie behalten es und verwenden es als 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

für Angular 2+ 

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