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 相关文章推荐
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
js 函数调用模式小结
2011/12/26 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python正规则表达式学习指南
2016/08/02 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
浅析Python数据处理
2018/05/02 Python
深入浅析Python传值与传址
2018/07/10 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
2014年党建工作汇报材料
2014/11/02 职场文书
婚宴新娘致辞
2015/07/28 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书