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 相关文章推荐
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
Vue渲染函数详解
2017/09/15 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
React diff算法的实现示例
2018/04/20 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
土木工程应届生自荐信
2013/09/24 职场文书
小学教师的个人自我鉴定
2013/10/26 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
产品推广策划方案
2014/05/10 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书