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 07 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
ES6 更易于继承的类语法的使用
Feb 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
a标签的css样式四个状态
2021/03/09 HTML / CSS
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
护理专业毕业生推荐信
2013/10/31 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
起诉书范文
2015/05/20 职场文书
党支部鉴定意见
2015/06/02 职场文书
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL