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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
vue使用echarts实现折线图
Mar 21 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
安装docker和docker-compose实例详解
2019/07/30 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
原JS实现banner图的常用功能
2017/06/12 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python 调用Java实例详解
2017/06/02 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
UNIX文件系统分类
2014/11/11 面试题
难忘的一课教学反思
2014/04/30 职场文书
学校清明节活动总结
2014/07/04 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python