set focus to textbox from angularJS controller

Question

I am creating a web app in which I am using angularJS, I have a jqueryui datepicker , which looks like this

<input type="text" ng-model="rc.reg.mddoj" ng-blur="rc.dojChange()" title="Date Of Joining" placeholder="Date Of Joining" class="form-control" datepicker />

and in my controller

r.dojChange = function () {
    var currentTarget = event.target;
    setTimeout(function () { r.reg.mddoj = currentTarget.value; }, 500);
}

and after executing this I want to set focus to my next control

<input type="text" ng-model="rc.reg.mdemail" title="EmailID" placeholder="EmailID" class="form-control validatingData" />

how can I set control to elements from angularJS controller.

I just want to set focus to my element from a directive and want to call the directive in my r.dojChange function()

kamentk · Accepted Answer · 2018-10-22 08:26:43Z

0

To focus an element from your AngularJS code you have to execute the following:

$timeout(function() {
   const elementToFocus = $element[0].querySelector(<SELECTOR TO YOUR ELEMENT>);
   if (elementToFocus) {
      elementToFocus.focus();
   }
}, 0);

answered Oct 22, 2018 at 8:26

kamentk

5472 gold badges8 silver badges17 bronze badges

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

2 Comments

user10249871 Over a year ago

actually i had done like this before, i had seen some example in which they used directive, but i was not able to achieve that but want to do like that

kamentk Over a year ago

As I understand you want to set focus on the next element after a date from the date picker is selected? Are you sure you need directive then? Since it will not be clear solution.

davidkonrad · Accepted Answer · 2018-10-22 08:53:09Z

0

If you are using setTimeout you must use $scope.$apply() to ensure changes to the scope is taken care of. Or you could use $timeout :

r.dojChange = function() {
  var currentTarget = event.target;
  $timeout(function() {
    r.reg.mddoj = currentTarget.value; 
    document.querySelector('[title="EmailID"]').focus(); //<---
  }, 500)
}

answered Oct 22, 2018 at 8:53

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Collectives™ on Stack Overflow

set focus to textbox from angularJS controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related