深究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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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 读取和编写 XML
2014/11/19 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Python-for循环的内部机制
2020/06/12 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
Java面试笔试题大全
2016/11/23 面试题
建筑实习自我鉴定
2013/10/18 职场文书
企业口号大全
2014/06/12 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js