Angular ng-focus Directive Set Focus on Textbox

Angular ng-focus Directive Set Focus on Textbox

Today, We want to share with you Angular ng-focus Directive Set Focus on Textbox.
In this post we will show you AngularJs Set Focus on Input Field Example, hear for angular set focus on input field we will give you demo and example for implement.
In this post, we will learn about Automatically Set Focus on a Textbox (Input Box) in AngularJS with an example.

ngFocus : Example – Set Focus [input, select, textarea, a,etc…]

AngularJs Set Focus on Input Field

It is a Specify custom behavior on focus event.Like (input, select, textarea, a,etc..)

Directive:

app.directive('inputFocusFunction', function () {
    'use strict';
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            scope[attr.inputFocusFunction] = function () {
                element[0].focus();
            };
        }
    };
});

html code

<input input-focus-function="focusOnSaveInput" ng-model="saveName">
<button ng-click="focusOnSaveInput()">Focus</button>

controller

$scope.focusOnSaveInput();

Angular Set Focus on Input Field

html code

Your Good Name: <input type="text" focus-me="isOpen">
<p>
	<hr/>
	<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
	<h3>
	<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of infinityknow.com </a>
</p>

Directive:

app.directive('focusMe', function($timeout, $parse) {
  return {
    //scope: true or false,   
	// simple optionally create a new child scope in angular
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        if(value === true) { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
      // simple on blur event in agularjs:
      element.bind('blur', function() {
         scope.$apply(model.assign(scope, false));
      });
    }
  };
});

Angular js auto focus for input box

<div ng-app="infinityknowApp">
    <div ng-controller="samplecontoller">
		<div class="focusexample">
			<h1>Auto Focus : </h1>
				With Out Focus : <input type="text"><br><br>
			Auto Focus : <input type="text" focus="true"><br><br>
		 </div> 
    </div>
</div>


script 

// simple Common directive used to for Focus

angular.module('infinityknowApp').directive('focus',
function($timeout) {
 return {
 scope : {
   trigger : '@focus'
 },
 link : function(scope, element) {
  scope.$watch('trigger', function(value) {
    if (value === "true") {
      $timeout(function() {
       element[0].focus();
      });
   }
 });
 }
};
}); 

Here is a working example:

Set-focus – Example

Set-focus – Example – 2