Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs input field focus event?

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.

like image 384
user2115378 Avatar asked Sep 02 '14 22:09

user2115378


People also ask

What is Focus event in angular?

The ng-focus directive tells AngularJS what to do when an HTML element gets focus. The ng-focus directive from AngularJS will not override the element's original onfocus event, both will be executed.

What is Ngmodeloptions in angular?

The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope. You can specify that the binding should wait for a specific event to occur, or wait a specific number of milliseconds, and more, see the legal values listed in the parameter values below.

What is blur event in angular?

A blur event fires when an element has lost focus. Note: As the blur event is executed synchronously also during DOM manipulations (e.g. removing a focussed input), AngularJS executes the expression using scope. $evalAsync if the event is fired during an $apply to ensure a consistent state.

What is Focus event in Javascript?

The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble. The opposite of focus is the blur event, which fires when the element has lost focus. The focus event is not cancelable.


2 Answers

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)"> 
like image 118
PSL Avatar answered Sep 28 '22 10:09

PSL


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);     });   } }; }); 
like image 32
Leo Farmer Avatar answered Sep 28 '22 12:09

Leo Farmer