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 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
js创建对象的方法汇总
Jan 07 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 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
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python k-近邻算法实例分享
2014/06/11 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python自动生产表情包
2017/03/17 Python
python读取二进制mnist实例详解
2017/05/31 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python中django学习心得
2017/12/06 Python
python中字符串的操作方法大全
2018/06/03 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
行政人事专员岗位职责
2014/03/05 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
大三学习计划书范文
2014/05/02 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书