CODEWITHSUNDEEP
javascripthtmlangularjs
nipeco
nipeco

Reputation: 760

Re-focus input field right after blur event in AngularJS

i have a html input field and would like to stay focussed on it no matter what happens. I know how to achieve it with JQuery but i only want to embed it if i really need to. My code example doesn't work.

My thoughts for code so far:

HTML

<input type="text" ng-blur="refocus()" autofocus>

AngularJS (inside my controller)

$scope.refocus = function($scope, $element) {
    $element.focus();
};

I hope you guys have the right inspiration or better solution to solve this :)

Upvotes: 0

Views: 1032

Answers (1)

miensol
miensol

Reputation: 41608

You can keep an element focused with the following directive:

angular.module('test', []).directive('stayFocused', function(){
  return {
    link: function($scope, $element){
      $element.on('blur', function(){
        $element[0].focus();
      });
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="test">
  First
  <input type="text" stay-focused="" autofocus>
  <br />
  Second
  <input type="text" stay-focused="" autofocus>
</div>

Upvotes: 2

Related Questions