深究AngularJS——如何获取input的焦点（自定义指令）

深藏阁楼爱情的钟 2022-07-24 03:26 214阅读 0赞

## ![在这里插入图片描述][20190627123607465.png] ##

# 1. 写在前面 #

*  关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS（JavaScript）的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数。所以，当人家问你如何获取焦点时一般的意思是，如果我进行了某些操作后，不用鼠标点击是如何自动获取焦点，问题的关键是“自动”。
 *  因为AngularJS没有像原生JS那样可通document.getElementById(“idVlaue”)直接获取元素的功能，所以只能通过自定义指令的方式实现，所以需要实现这个，我们还得有angularjs自定义指令的基础。  
    可参考：[http://blog.csdn.net/zcl\_love\_wx/article/details/51331539][http_blog.csdn.net_zcl_love_wx_article_details_51331539]

# 2. 代码示例 #

各位看官，芭蕉即焦点，如有戳中你的笑点，概不负责。温馨提示：下面代可直接拿去编辑器运行看效果哦，哎，没办法，就是这么负责。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    	<div ng-app="myApp" ng-controller="control">
    	  	<input type="text" set-Focus ng-blur="setBlur()">
    		<button ng-click="getFocus()">孙爷爷我要去取芭蕉扇了</button>
    	</div>	
    	
    <script type="text/javascript">		
    	//模型
        var app = angular.module('myApp',[]);
    		
    	//控制器
    	app.controller("control",function($scope){
    		$scope.isCome = false;		//判断大圣来了没
    		$scope.isFocus = false;		//判断是不是要取芭蕉扇
    		
    		$scope.getFocus = function(){
    			$scope.isFocus = true;	//大圣来了
    			$scope.isCome = true;	//要取芭蕉扇
    		};
    		
    		$scope.setBlur = function(){
    			$scope.isFocus = false;//没人要来取芭蕉扇了
    		}
    	});
    		
    	//自定义指令
    	 app.directive('setFocus',[ function(){
    		 return {
    			 scope:false,
    			 link:function(scope, element){						
    				 scope.$watch("isFocus",function(newValue,oldValue, scope) {
    					 //大圣来了，且要取芭蕉扇
    					 if(newValue && scope.isCome){
    						 element[0].focus(); //获取焦点
    						 alert("猴哥，老牛不在家，我一介女子还不是你说什么我就照做，可你进入人家的身体也不打声招呼，进了就进了，还搞得我那么难受，求你别搞了，给，芭~~~蕉~~~扇！")
    					 }
    				}, true);;
    			 }
             };
        }]);
    		
    </script>
    </body>	
    </html>

# 3. 代码说明 #

首先说明一下，我本后台Java工程师，因前端大牛搭了AngularJS后却辞职去了新浪，一下无人接手，我便自告奋勇接了活。为了啥？为了涨工资塞！  
该文默认读者对angualrJS有一定的基础语法，此文的亮点在哪呢？亮点在于**实现获取焦点的逻辑**。angularjs文档只会告诉你用自定义指令获取焦点，如代码：

<body>
    	<div ng-app="myApp" >
    	  <input type="text" set-Focus>
    	</div>
        <script type="text/javascript">
    			var app = angular.module('myApp',[]);
    			app.directive('setFocus', function(){
    				  return function(scope, element){
    					 element[0].focus();
    				  };
    			});
        </script>
    </body>

这块代码，除了能进入页面获取焦点，还能干啥？还能告诉初学者说，亲，自定义指令里面还可以直接return 一个function哟。  
正式说说我是如何实现执行一些操作后实现获取焦点的：  
首先自定义指令会用不必说了，可亲们是否还知道自定义里有一个属性叫scope啊？在我提供的链接的文章有说明它有两个值类型，boolean和对象，那里面的示例只说了值为对象的例子，但为boolean时没有说过。

既然我们需要在进行某个操作后再获取焦点，那么就需要我们能同时操作自定义指令与控制器里的变量，如第一例子里的isCome和isFocus。而在scope说明中这样写到：scope值为false(默认值): 使用父作用域作为自己的作用域。为true时: 新建一个作用域，该作用域继承父作用域。所以我们默认就可以直接在自定义指令里操作控制器里的变量。于是我就又用到了监听$watch,这是个什么鬼？后面会写个小文专门解释。只要监听到变化后的结果符合获取焦点的要求，我们就执行element\[0\].focus();来获取焦点。

[20190627123607465.png]: https://img-blog.csdnimg.cn/20190627123607465.png
[http_blog.csdn.net_zcl_love_wx_article_details_51331539]: http://blog.csdn.net/zcl_love_wx/article/details/51331539