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 相关文章推荐
JS可以控制样式的名称写法一览
Jan 16 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
js浏览器html5表单验证
Oct 17 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
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
初探PHP5
2006/10/09 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php中opendir函数用法实例
2014/11/15 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
微信小程序排坑指南详解
2018/05/23 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
留学自荐信写作方法
2014/01/27 职场文书
授权委托书协议书
2014/10/16 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android