浅谈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声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
微信小程序自定义联系人弹窗
May 26 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
使用python3实现操作串口详解
2019/01/01 Python
python匿名函数用法实例分析
2019/08/03 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
什么是抽象
2015/12/13 面试题
大学生村官心得体会范文
2014/01/04 职场文书
给领导的致歉信范文
2014/01/13 职场文书
一年级数学教学反思
2014/02/01 职场文书
阿德的梦教学反思
2014/02/06 职场文书
超市周年庆活动方案
2014/08/16 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js