Angularjs的键盘事件的绑定


Posted in Javascript onJuly 27, 2017

Angularjs的键盘事件的绑定

推荐button

方法一:ng内置指令

<button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid">
 登录
</button>

说明:在对应的控制器中的$scope上绑定一个todoSomething方法

$scope.todoSomething=function($event){
   if($event.keyCode==13){//回车
     login();
   }
 }

方法二:自定义指令

html
<button ng-click="login()" ng-enter="login()" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid">
 登录
</button>

指令

myApp.directive('ngEnter', function () {
   return function (scope, element, attrs) {
     element.bind("keydown keypress", function (event) {
       if (event.which === 13) {
         scope.$apply(function () {
           scope.$eval(attrs.ngEnter);
         });
         event.preventDefault();
       }
     });
   };
 });

总结:两种方法都能实现敲回车登录的功能,不过推荐指令的方式,对$scope的污染比较低

关于AngularJS指令事件可以参考:https://3water.com/article/119742.htm

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 #Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 #Javascript
You might like
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
Python中unittest用法实例
2014/09/25 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
python障碍式期权定价公式
2019/07/19 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
艺术学院毕业生自荐信
2014/07/05 职场文书
党员作风建设自查报告
2014/10/23 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
运动会班级前导词
2015/07/20 职场文书
军事理论课感想
2015/08/11 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
php 解析非标准json、非规范json
2021/04/01 PHP
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL