浅谈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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
javascript 面向对象 function类
May 13 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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调用三种数据库的方法(2)
2006/10/09 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
对pandas中apply函数的用法详解
2018/04/10 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
pandas去除重复列的实现方法
2019/01/29 Python
机器学习实战之knn算法pandas
2019/06/22 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
校运会入场式解说词
2014/02/10 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书