AngularJs Set Focus on Input Field
this post we will show you how to AngularJs Set Focus on Input Field and AngularJs get Focus on Input Field. we will show you to how to create Focus on Input Field any input field using setFocus.
how to set AngularJs Set focus on Input Field? – There are some ways to line focus on Input Field using AngularJs. Here during this tutorial we are progressing to justify however you’ll set concentrate on input field victimization the AngularJs. we’ll justify this with example and demo.
AngularJs Set Focus on Input Field Example
we can set focus on(function setFocus()) any input of form element simply as give code –
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJs Set Focus on Input Field - onlinecode</title>
<script SRC="href="http://www.onlinecode.org""></script>
<script>
var myFocus = angular.module("myFocus", []);
myFocus.controller("focusController", function($scope, $window) {
$scope.setFocus = function() {
var getelement = $window.document.getElementById("email");
getelement.focus();
};
});
</script>
</head>
<body>
<div ng-app="myFocus">
<div ng-controller="focusController">
<input type="text" name="email" id="email" />
<button ng-click="setFocus()">Click Hear To Set Focus</button>
</div>
</div>
</body>
</html>We have we created a function setFocus() that is named on the “button click”. $window.document.getElementById(“email”); is used to induce element by id, $window service is employed to induce the element by id.
If we run the above given example it will set focus on the input element like given in image . The output of the above example will be something look like this image ::
AngularJs Set Focus on Input Field – example 2
other example of Angular Set Focus on Input Field.
<!DOCTYPE html>
<html ng-app="myFocus">
<head>
<meta charset="utf-8" />
<title>Angular Set Focus on Input Field - onlinecode</title>
<script SRC="href="http://www.onlinecode.org""></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="myfocus.js"></script>
</head>
<body>
<button ng-click="checkVisible1 = !checkVisible1">Check Toggle input 1</button>
<input ng-show="checkVisible1" value="auto-focus off" />
<br>
<button ng-click="checkVisible2 = !checkVisible2">Check Toggle input 2</button>
<input ng-show="checkVisible2" auto-focus="{{ checkVisible2 }}" value="auto-focus on" />
</body>
</html>Angular Set Focus on Input Field – myfocus.js
other example of Angular Set Focus on Input Field myfocus.js.
var myFocus = angular.module('myFocus', []);
myFocus.directive('autoFocus', function($timeout) {
return {
link: function (scope, element, attrs) {
attrs.$observe("autoFocus", function(newValue){
if (newValue === "true")
$timeout(function(){element.focus()});
});
}
};
});
You also like Angularjs Moment Picker AND Angularjs Ng-Bind with Example