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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
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缓存类分享     php缓存机制
2014/01/22 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
js 自动播放的实例代码
2013/11/19 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python