浅谈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 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
更正确的asp冒泡排序
2007/05/24 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
js实现随机点名功能
2020/12/23 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python实现端口复用实例代码
2014/07/03 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python实现二分查找算法
2017/09/21 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python删除n行后的其他行方法
2019/01/28 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python导入库的具体方法
2020/06/18 Python
python定时截屏实现
2020/11/02 Python
货物运输服务质量承诺书
2014/05/29 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
校园运动会广播稿
2014/10/06 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
教师自查自纠材料
2014/10/14 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
导游词之西递宏村
2019/12/10 职场文书