programing

Angularjs 입력 필드 포커스 이벤트?

sourcetip 2023. 2. 13. 23:19
반응형

Angularjs 입력 필드 포커스 이벤트?

angularjs를 사용하여 다음과 같은 일반 입력 필드를 만들었습니다.

<input type="text" style="border: none" ng-model="model" >

다음을 수행합니다.

만약 누군가가 입력란을 클릭한다면, 나는 예를 들어 방법 A를 호출하고 싶다.그런 다음 이 필드에 텍스트를 쓰고 입력 필드가 더 이상 초점이 맞춰지지 않도록 사용자가 내 페이지의 어딘가를 클릭하면 메서드 B를 호출해야 합니다.이것이 angularjs에서는 가능한가?그렇다면 어떻게 해야 하는가?ng-focus는 입력 이벤트에서만 활성화되고 출력에서는 활성화되지 않는다.

이것으로 무엇인가를 잠그고 싶은데, 방법 A는 값만 true로 설정하고 방법 B는 같은 값을 false로 설정합니다.그러나 입력 필드가 활성 상태인지 아닌지 알아야 합니다.

현재 및 를 보고 있습니다.

<input type="text" style="border: none" ng-model="model" ng-focus="A()" ng-blur="B()">

참고로 인라인 스타일 대신 css 클래스를 사용합니다.:)

또는 인수를 사용하여 동일한 메서드를 호출하여 acc:- 값을 설정합니다.

 <input type="text" style="border: none" ng-model="model" ng-focus="A(true)" ng-blur="A(false)">

응용 프로그램 내의 필드에 적용할 수 있는 기능을 사용하는 경우 지시문에 넣을 수 있습니다.다음으로 필드의 포커스 또는 흐림에 따라 css 클래스를 추가 및 삭제하는 예를 나타냅니다.

angular.module('myApp').directive('inputFocus', function () {

var FOCUS_CLASS = 'input-focused';
return {
  restrict: 'A',
  priority: 1,
  require: 'ngModel',
  link: function (scope, element, attrs, ctrl) {
    element.bind('focus',function () {
      element.parent().addClass(FOCUS_CLASS);    
    }).bind('blur', function () {
      element.parent().removeClass(FOCUS_CLASS);
    });
  }
};
});

메서드 B를 앵글의 ng-blur 지시어에 바인딩하여 입력이 포커스를 잃었을 때를 검출할 수 있습니다.

<input type='text' ng-focus='methodA()' ng-blur='methodB()' ng-model='model'>

언급URL : https://stackoverflow.com/questions/25633139/angularjs-input-field-focus-event

반응형