浅谈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 相关文章推荐
jquery实现带二级菜单的导航示例
Apr 28 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
面包屑导航详解
Dec 07 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python flask安装和命令详解
2019/04/02 Python
pymysql模块的操作实例
2019/12/17 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
linux面试题参考答案(9)
2015/01/07 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
妇女工作先进事迹
2014/08/17 职场文书
离职证明标准格式
2014/09/15 职场文书
学习普通话的体会
2014/11/07 职场文书
工作岗位职责范本
2015/02/15 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技