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:
$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