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 相关文章推荐
JS通过相同的name进行表格求和代码
Aug 18 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
javascript 中的继承实例详解
May 05 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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开发GUI
2006/10/09 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
js实现拖拽元素选择和删除
2020/08/25 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
几个人围成一圈的问题
2013/09/26 面试题
回门宴答谢词
2014/01/13 职场文书
员工拓展培训方案
2014/02/15 职场文书
发展部经理职责规定
2014/02/22 职场文书
党校学习自我鉴定
2014/02/24 职场文书
工作收入证明模板
2014/10/10 职场文书
赤壁观后感(2)
2015/06/15 职场文书
业务员管理制度范本
2015/08/06 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Web应用开发TypeScript使用详解
2022/05/25 Javascript
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS