深究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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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 GD绘制24小时柱状图
2008/06/28 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
json跟xml的对比分析
2008/06/10 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python aiohttp的使用详解
2019/06/20 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
Servlet方面面试题
2016/09/28 面试题
项目副经理岗位职责
2013/12/30 职场文书
回门宴父母答谢词
2014/01/26 职场文书
地球一小时倡议书
2014/04/15 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
上课迟到检讨书
2015/05/06 职场文书
士兵突击观后感
2015/06/16 职场文书