`

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

阅读更多

一.写在前面

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

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

 

二.代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <div ng-app="myApp" ng-controller="control">
        <input type="text" set-Focus ng-blur="setBlur()">
        <button ng-click="getFocus()">孙爷爷我要去取芭蕉扇了</button>
    </div>
<script src="jquery-1.8.3.js"></script> 
<script src="angular1.2.9.js"></script>	
<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>
</html>

 

三.代码说明

  该文默认读者对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();来获取焦点。

 

文章来源:http://blog.csdn.net/zcl_love_wx/article/details/51382197

分享到:
评论

相关推荐

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

    关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答,只能说明作者并为真正理解人家的需求。ng-focus是一个事件,跟原生JS(JavaScript)的onfocus是一样的,当...

    基于SpringBoot+Vue的“智慧食堂”设计与实现(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    历届奥运会奖牌数据(1896-2024年).xlsx

    本次分享的数据为1896年-2024年(从雅典到巴黎)间奥运会奖牌数据,包括年份、届次、国家地区、名次、金牌、银牌、铜牌等数据,含免费下载链接 ## 一、数据介绍 数据名称:历届奥运会奖牌数据 数据范围:世界各国 样本数量:1877条 数据年份:1896年-2024年 数据说明:包括届次、国家、名次等数据

    基于SpringBoot+Vue的实习管理系统(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    【人机交互】MATLAB直车道线检测.zip

    【人机交互】MATLAB直车道线检测

    基于SSM+JSP的KTV点歌系统+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    基于SSM+JSP的课程在线教育资源管理系统(1)+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    2023年计算机硬件的组装实验报告.pdf

    2023年计算机硬件的组装实验报告.pdf

    springboot大学生租房系统 LW PPT.zip

    ava项目springboot基于springboot的课程设计,包含源码+数据库+毕业论文

    Flutter分析:带有质量平衡部分机翼的MATLAB计算(含Elastic轴与中心对齐)

    内容概要:本文档主要针对含有质量平衡段(即弹性轴和重心重合点xa=0)的硬翼Flutter问题提供了MATLAB解决方案。文档通过迭代的方式对一系列参数(如频率比(fr)、弹性轴(E)和半径(r)等)进行操作,并利用贝塞尔函数(Kn)来评估flutter速度(UFhat),从而预测了不同质比(mu)下flutter的缩减速度变化情况。同时,文档包含了绘图命令以视觉展示减小颤振速度随质量比变化的趋势以及相应的MATLAB代码。 适合人群:航空工程、飞行器动力学领域的科研工作者,工程师及研究生。尤其是那些从事飞行安全性和稳定性研究的专业人士。 使用场景及目标:主要用于解决飞行器设计过程中遇到的具体颤振问题,能够为设计新型飞机或其他有翼飞行物体提供科学依据和技术支持。它还能够辅助教育,帮助相关专业的学生理解flutter现象及其预防措施。 其他说明:此文件是以数值方法探讨带质量平衡的翅膀颤振特性的实例,在工程上有着重要意义。对于希望深入学习此类问题的人来说,这是一个极好的参考资料和实验平台。然而,实际应用还需要进一步考虑真实条件下的复杂因素,因此需要更多的专业知识和背景资料的支持。

    基于JAVA的机场航班起降与协调管理系统&毕业设计&毕业论文&数据库&演示视频&源代码

    本次项目是设计一个基于JAVA的机场航班起降与协调管理系统。 (1)在经济可行性上来分析的话,该软件是机场内部使用的一个指挥协调软件,属于航空安全投资,本软件开发成本并不高,软件和服务器数据库可以用机场原有的数据库进行开发,比起空难给航空公司造成的损失来说九牛一毛。 (2)在技术可行性上来分析的话,该软件主要运用了Java技术、jQuery-easyui和Mysql数据库技术。Java是到目前来说最稳定的、最可靠的软件开发工具;jQuery-easyui虽然是比较新的前台开发技术,但是他的界面新颖整洁,适合于功能性软件的开发;Mysql数据库也是许多大公司都采用的软件项目开发数据库,不仅稳定而且性能可靠,可以用作本次软件的开发。 (3)在法律可行性上来分析的话,该软件使用的技术都为开源的软件开发工具和语言,虽然Java等开发技术都存在Sun公司的版权问题,但是Java技术是可以免费使用的,没有涉及到法律上的侵权。 (4)在方案可行性上来分析的话,此次软件开发的很大一部分精力都放在了软件的需求分析和设计方面,设计出来的软件可以很好地去实现我们所要完成的软件预先设计的功能。

    2023年计算机与通信网络实验报告.pdf

    2023年计算机与通信网络实验报告.pdf

    2023年四川省德阳市统招专升本计算机自考真题(含答案).pdf

    2023年四川省德阳市统招专升本计算机自考真题(含答案).pdf

    基于SSM+JSP的农产品供销服务系统+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    篮球论坛系统--论文.zip

    Java项目基于springboot的课程设计,包含源码+数据库+毕业论文

    基于SpringBoot+Vue的致远汽车租赁系统(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目,仅供学习参考。 Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    GUI面板MATLAB答题纸试卷自动识别.zip

    GUI面板MATLAB答题纸试卷自动识别

    Java毕业设计-SpringBoot+Vue的班级综合测评管理系统(附源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    springboot大学生体质测试管理系统--论文.zip

    ava项目springboot基于springboot的课程设计,包含源码+数据库+毕业论文

Global site tag (gtag.js) - Google Analytics