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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue操作Storage本地化存储
Apr 29 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学习之字符串比较和查找
2011/04/17 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
python类和继承用法实例
2015/07/07 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
详解python开发环境搭建
2016/12/16 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Django values()和value_list()的使用
2020/03/31 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
深入了解NumPy 高级索引
2020/07/24 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
求职简历推荐信范文
2013/12/02 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
一文搞懂Redis中String数据类型
2022/04/03 Redis