深究AngularJS如何获取input的焦点(自定义指令)


Posted in Javascript onJune 12, 2017

1. 写在前面

关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答,只能说明作者并为真正理解人家的需求。ng-focus是一个事件,跟原生JS(JavaScript)的onfocus是一样的,当我们点击input框时,就会触发该事件,而在该事件里我们可以调用一个函数。所以,当人家问你如何获取焦点时一般的意思是,如果我进行了某些操作后,不用鼠标点击是如何自动获取焦点,问题的关键是“自动”。

因为AngularJS没有像原生JS那样可通document.getElementById("idVlaue")直接获取元素的功能,所以只能通过自定义指令的方式实现,所以需要实现这个,我们还得有angularjs自定义指令的基础。可参考:https://3water.com/article/115979.htm

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();来获取焦点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
详解JS数组方法
Nov 20 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 #Javascript
前端构建工具之gulp的语法教程
Jun 12 #Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 #Javascript
微信小程序 自定义Toast实例代码
Jun 12 #Javascript
Angular4 中常用的指令入门总结
Jun 12 #Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 #Javascript
You might like
一周学会PHP(视频)Http下载
2006/12/12 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Javascript的this详解
2019/03/23 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
快速查询Python文档方法分享
2017/12/27 Python
flask入门之表单的实现
2018/07/18 Python
pandas 时间格式转换的实现
2019/07/06 Python
税务专业毕业生自荐信
2013/11/10 职场文书
人事助理岗位职责
2013/11/18 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
党风廉政承诺书
2014/03/27 职场文书
党员公开承诺书内容
2014/05/20 职场文书
股东合作协议书
2014/09/12 职场文书
水电工岗位职责
2015/02/14 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers