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

<button>Focus</button>

controller

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

$scope.focusOnSaveInput();

Angular Set Focus on Input Field

html code

Your Good Name: 
<p>
	<hr />
	<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
	<h3>
	<a href="https://infinityknow.com/">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>
    <div>
		<div class="focusexample">
			<h1>Auto Focus : </h1>
				With Out Focus : <br><br>
			Auto Focus : <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

READ :  PHP Toggle switch Update DB field using jQuery Ajax