浅谈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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
微信小程序实现选项卡功能
Jun 19 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
详解小程序之简单登录注册表单验证
May 13 Javascript
初学node.js中实现删除用户路由
May 27 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Python tkinter模版代码实例
2020/02/05 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
Java程序员常见面试题
2015/07/16 面试题
好习惯伴我成长演讲稿
2014/05/21 职场文书
雷人标语集锦
2014/06/19 职场文书
大学生军训感言
2015/08/01 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技