1. Write it in front
Regarding how to get the focus of input boxes, textarea, etc., many articles on the Internet just tell you the built-in command ng-focus. Answers like this can only explain the author and truly understand other people's needs. ng-focus is an event, the same as onfocus in native JS (JavaScript). When we click the input box, the event will be triggered, and in this event we can call a function. So, when people ask you how to get focus, the general meaning is that if I do something, I don’t use the mouse to click, how to automatically get focus, the key to the problem is “automatic”.
Because AngularJS does not have the function of directly obtaining elements through ("idVlaue") like native JS, it can only be implemented through custom instructions. Therefore, we need to implement this, and we also need to have the basis of angularjs custom instructions. References can be made:https:///article/
2. Code example
Dear readers, banana leaves are the focus. If there is any laughing point that hits you, you will not be responsible. Warm reminder: You can directly use it to the editor to run it to see the effect. Oh, there is no way, that's it.
<!-- Legend has it that the banana fan is transformed by Princess Iron Fan's saliva，Therefore, it can be re-taken -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="control">
<input type="text" set-Focus ng-blur="setBlur()">
<button ng-click="getFocus()">Grandpa Sun, I'm going to get the banana fan</button>
</div>
<script type="text/javascript">
//Model var app = ('myApp',[]);
//Controller ("control",function($scope){
$ = false; //Judge if the Great Sage is here $ = false; //Judge whether you want to take a banana fan
$ = function(){
$ = true; //The Great Sage is here $ = true; //Get the banana fan };
$ = function(){
$ = false;//No one is coming to get the banana fan }
});
//Custom command ('setFocus',[ function(){
return {
scope:false,
link:function(scope, element){
scope.$watch("isFocus",function(newValue,oldValue, scope) {
//The Great Sage is here, and you need to get the banana fan if(newValue && ){
element[0].focus(); //Get focus alert("Brother Monkey, Lao Niu is not at home. I am a woman who can do whatever you say, but you don't say hello when you enter the other person's body. You go in and it makes me so uncomfortable. Please don't do it anymore, give it to me~~~ banana~~~ fan!")
}
}, true);;
}
};
}]);
</script>
</body>
</html>
3. Code description
First of all, I am a backstage Java engineer, but after I got AngularJS, I resigned and went to Sina. No one took over, so I volunteered to take on the job. For what? To increase wages!
This article defaults to readers having a certain basic syntax for angualrJS. What are the highlights of this article? The highlight is to implement the logic of obtaining focus. The angularjs documentation will only tell you to use custom directives to get focus, such as the code:
<body>
<div ng-app="myApp" >
<input type="text" set-Focus>
</div>
<script type="text/javascript">
var app = ('myApp',[]);
('setFocus', function(){
return function(scope, element){
element[0].focus();
};
});
</script>
</body>
What else can this code do besides entering the page to get focus? You can also tell beginners that you can directly return a function in the custom command.
Let me formally talk about how I implemented the focus after performing some operations:
First of all, you need to use custom commands, but do you still know that there is a property called scope in customization? In the article I provided link there is an explanation that it has two value types, boolean and object, the examples in there only say the examples of the value as object, but not when it is boolean.
Since we need to obtain focus after performing a certain operation, we need to be able to operate both custom instructions and variables in the controller at the same time, such as isCome and isFocus in the first example. In the scope description, it is written as follows: scope value is false (default): Use the parent scope as your own scope. When true: Create a new scope that inherits the parent scope. So we can directly operate variables in the controller in the custom instructions by default. So I used the monitoring $watch again, what the hell is this? I will write a short article to explain it later. As long as the monitor hears that the change meets the requirements for obtaining focus, we execute element[0].focus(); to obtain focus.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.