深究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图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
再谈JavaScript线程
Jul 10 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP类的特性实例分析
2016/09/28 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python常用模块用法分析
2014/09/08 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
MYSQL基础面试题
2012/05/13 面试题
挑战杯创业计划书的写作指南
2014/01/07 职场文书
素质拓展感言
2014/01/29 职场文书
公司端午节活动方案
2014/02/04 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
军训新闻稿范文
2015/07/17 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python