深究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创建快捷方式的简单实例
Aug 09 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
小程序自定义圆形进度条
Nov 17 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
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
Redis构建分布式锁
2017/03/28 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
Javascript实现字数统计
2015/07/03 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python re模块介绍
2014/11/30 Python
python学习必备知识汇总
2017/09/08 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
幼师专业毕业生自荐信
2013/09/29 职场文书
决心书标准格式
2014/03/11 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
贫困生证明范文
2015/06/16 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL