AngularJS基础 ng-keydown 指令简单示例


Posted in Javascript onAugust 02, 2016

AngularJS ng-keydown 指令

AngularJS 实例

按下按键时执行的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

<input ng-keydown="count = count + 1" ng-init="count=0" />

<h1>{{count}}</h1>

<p>该实例在输入框每次按下按键时,计算变量 "count" 会自动加 1。</p>

</body>
</html>

定义和用法

ng-keydown 指令用于告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。

ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时,ng-keydown 表达式与原生的 onkeydown 事件将都会执行。

按键敲击的事件顺序:

1.Keydown

2.Keypress

3.Keyup

语法

<element ng-keydown="expression"></element>

<input>, <select>, <textarea>, 和其他可编辑元素支持该指令。

参数值

 

描述
expression 按下按键执行的表达式。
Javascript 相关文章推荐
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Vue.js进阶知识点总结
Apr 01 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
AngularJs自定义服务之实现签名和加密
Aug 02 #Javascript
浅谈Cookie的生命周期问题
Aug 02 #Javascript
jQuery实现的兼容性浮动层示例
Aug 02 #Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 #Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 #Javascript
基于Vue.js实现数字拼图游戏
Aug 02 #Javascript
js 获取范围内的随机数实例代码
Aug 02 #Javascript
You might like
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python创建n行m列数组示例
2019/12/02 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
基于Python实现粒子滤波效果
2020/12/01 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
文秘专业自荐信
2013/10/14 职场文书
酒后驾车标语
2014/06/30 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
停发工资证明范本
2015/06/12 职场文书
运动会新闻稿
2015/07/17 职场文书
教师节获奖感言
2015/07/31 职场文书
高中开学感言
2015/08/01 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android