키를 누를 때 입력 필드를 흐리게 표시 각도 입력

키를 누를 때 입력 필드를 흐리게 표시 각도 입력

다른 사람이 "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다른 기능에 재사용하고 싶기 때문에 지시적인 그대로입니다.

업데이트: 흐릿하게 만드는 것만으로 전체 지침을 만들 수 있다는 것을 알고 있습니다(지금은 그렇게 하고 있습니다). 하지만 다음과 같은 작업을 수행할 수 있습니다.

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

또는 현재 요소를 매개 변수로 전달하려면 어떻게 해야 합니까?

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

여러 가지 시도를 한 후 타깃 요소를 얻으려면 $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를 지시문 외부에 전달할 수 있다면, 요청하신 재사용 방법이 모호해질 수 있습니다.

Angular 2+의 경우

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

Solute Nonagon은 그것에 매우 가까웠다.올바른 주장을 펼치기만 하면 됩니다.디렉티브는 이벤트 파라미터를 다음과 같이 선언했습니다.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>

언급URL : https://stackoverflow.com/questions/27234110/blur-an-input-field-on-keypress-enter-on-angular