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:
[php]
app.directive(‘inputFocusFunction’, function () {
‘use strict’;
return {
restrict: ‘A’,
link: function (scope, element, attr) {
scope[attr.inputFocusFunction] = function () {
element[0].focus();
};
}
};
});
[/php]
html code
[php]
[/php]
controller
[php]
$scope.focusOnSaveInput();
[/php]
Angular Set Focus on Input Field
html code
[php]
Your Good Name:
Solution of AngularJs All Problems For infinityknow.com
My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com
[/php]
Directive:
[php]
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));
});
}
};
});
[/php]
Angular js auto focus for input box
[php]
Auto Focus :
With Out Focus :
Auto Focus :
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();
});
}
});
}
};
});
[/php]
Here is a working example:
Set-focus – Example
Set-focus – Example – 2