web-dev-qa-db-ja.com

Angularjs入力フィールドフォーカスイベント？

angularjsを使用し、次のような通常の入力フィールドを作成しました：

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

私は次のことをしたい：

誰かが入力フィールドをクリックすると、たとえばメソッドAを呼び出す必要があります。次に、このフィールドにテキストを書き込み、ユーザーがページのどこかをクリックして入力フィールドがフォーカスされなくなった場合、メソッドBを呼び出します。アンギュラーjsで？はいの場合、どうすればいいですか？ ng-focusは入力イベントでのみアクティブになり、出力ではアクティブになりません。

私はこれで何かをロックしたい、メソッドAは値のみをtrueに設定し、メソッドBは同じ値をfalseに設定します。しかし、入力フィールドがアクティブであるときとそうでないときを知る必要があります。

javascripthtmlangularjsangularjs-directive
33
user2115378

あなたが見ている ng-focus および ng-blur 。

<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)">
51
PSL

アプリケーション全体のフィールドに適用したい機能を使用している場合は、それをディレクティブに入れることができます。フィールドのフォーカスまたはぼかしに基づいて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);
    });
  }
};
});
5
Leo Farmer

メソッドBをアンギュラーのng-blurディレクティブにバインドして、入力がフォーカスを失ったことを検出できます

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