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


Posted in Javascript onAugust 02, 2016

AngularJS ng-keypress 指令

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-keypress="count = count + 1" ng-init="count=0" />

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

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

</body>
</html>

定义和用法

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

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

按键敲击的事件顺序:

1.Keydown

2.Keypress

3.Keyup

语法

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

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

参数值

描述
expression 按下按键执行的表达式。
Javascript 相关文章推荐
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jQuery功能函数详解
Feb 01 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 #Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 #Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 #Javascript
浅谈Cookie的生命周期问题
Aug 02 #Javascript
jQuery实现的兼容性浮动层示例
Aug 02 #Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 #Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
js实现楼层导航功能
2017/02/23 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
PyTorch中的C++扩展实现
2020/04/02 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
服务之星事迹材料
2014/05/03 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
迎新生晚会主持词
2015/06/30 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技