Angularjs input field focus event?

Question

i use angularjs and i have created a normal input field like this:

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

i want do the following:

if someone clicks in the input field, i want call for example method A. Then he writes text in this field and if the person clicks somewhere in my page so that the input field is no longer focused it should call method B. is this possible with angularjs ? if yes, how can i do that ? ng-focus is only active at the input event but not at the output..

i want lock something with this, method A sets only a value to true and method B sets the same value to false. but i must know when the input field is active and when not.

Solution 1

You are looking at ng-focus and ng-blur.

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

On a side note, use css classes instead of inline styles.. :)

Or just call the same method with argument and set the value acc:-

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

Solution 2

If you are using functionality that you may wish to apply to fields throughout your application, you could put the it into a directive. Here is an example that adds and removes a css class based on the focus or blur of a field:

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);
    });
  }
};
});

Solution 3

You can bind method B to angular's ng-blur directive to detect when an input loses focus

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

Comments

[Boris]

Nice and neat - you can also use element.focus() and element.blur() that come from jQuery as that makes it a bit tidier.