浅谈angularjs中响应回车事件


Posted in Javascript onApril 24, 2017

下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码)

<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>angularjs-demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="text" ng-model="text1" ng-keyup="enterEvent($event)" />
<button ng-click="clickEvent()">test</button>
</body>
<script type="text/javascript">
var app = angular.module('myApp', [])
.controller('ctrl', function($scope){
  $scope.clickEvent = function() {
    $scope.text1 = "Hello world!";
  }
  
  $scope.enterEvent = function(e) {
    var keycode = window.event?e.keyCode:e.which;
    if(keycode==13){
      $scope.clickEvent();
    }
  }
  
});
</script>
</html>

以上这篇浅谈angularjs中响应回车事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中function()使用方法
Dec 24 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
老生常谈angularjs中的$state.go
Apr 24 #Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 #Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 #Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 #Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 #Javascript
Javascript操作dom对象之select全面解析
Apr 24 #Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 #Javascript
You might like
Zend的Registry机制的使用说明
2013/05/02 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python压缩和解压缩zip文件
2015/02/14 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Django密码存储策略分析
2020/01/09 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
小学毕业家长寄语
2014/01/19 职场文书
客服部工作职责范本
2014/02/14 职场文书
文明寝室申报材料
2014/05/12 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
公司会议开幕词
2016/03/03 职场文书