AngularJS: How to trigger function call when a form field gets focus

Question

I want my controller to perform some action when a user clicks in a form field (when the form field gets focus). How can I do this? See this plunker.

Here is my controller: angular.module('myApp', [])

.controller('AppCtrl', ['$scope',
  function($scope) {
    $scope.field1 = "Default text";
    $scope.focus = false;
    $scope.formFieldJustGotFocus = function() {
      $scope.focus = true; 
      // Do all the stuff I need to happen when the form has just gotten focus
    }
  }
]);

And here is the view:

<body ng-app="myApp" ng-controller="AppCtrl">
  <h3>Testing</h3>
  <p>I want to perform some action in the controller when a form field gets focus. How can I best achieve this?</p>
  <form name="myForm">
    <input type="text" name="field1" ng-model="field1">
  </form>
  <p>Form field has focus: {{focus}}</p>
</body>

meriadec · Accepted Answer · 2014-09-25 12:29:07Z

8

You can use the ngFocus directive. The inverse is ngBlur.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  
  <input type="text" ng-focus="isFocused = true" ng-blur="isFocused = false">
  <p ng-if="isFocused">Focus !</p>
  
</div>

answered Sep 25, 2014 at 12:29

meriadec

2,98321 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EricC Over a year ago

Lots of correct answers, all given at aprox the same time (I cannot see who was first), so I'll award you @meriadec for having in-answer demo, I had no idea that you could do that here at stackoverflow :)

Kalhan · Accepted Answer · 2014-09-25 12:28:55Z

0

<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus()">

use like this ng-focus

answered Sep 25, 2014 at 12:28

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Comments

Taras Kostiuk · Accepted Answer · 2014-09-25 12:30:42Z

0

Try ng-focus.

See more info: https://docs.angularjs.org/api/ng/directive/ngFocus

answered Sep 25, 2014 at 12:30

Taras Kostiuk

2111 silver badge4 bronze badges

Comments

abdullacm · Accepted Answer · 2014-09-25 13:13:15Z

0

use -> ng-focus

<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus();">

this plunker

in the code he had written the function formFieldJustGotFocus(), but it was not bound to the focus event

edited Sep 25, 2014 at 13:13

answered Sep 25, 2014 at 12:30

abdullacm

6465 silver badges17 bronze badges

1 Comment

Baum mit Augen Over a year ago

Please explain what is wrong with OP's code and why this solved the problem by editing your answer.

Collectives™ on Stack Overflow

AngularJS: How to trigger function call when a form field gets focus

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related