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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 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
一个域名查询的程序
2006/10/09 PHP
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
jquery处理json对象
2014/11/03 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
Python实现在线音乐播放器
2017/03/03 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python列表的切片实例讲解
2019/08/20 Python
Python post请求实现代码实例
2020/02/28 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Django日志及中间件模块应用案例
2020/09/10 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
超市开学活动方案
2014/03/01 职场文书
年会邀请函范文
2015/01/30 职场文书
餐馆开业致辞
2015/08/01 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL