浅谈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下用层来实现select的title提示属性
Feb 23 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
Web开发之JavaScript
Mar 29 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
js实现计时器秒表功能
Dec 16 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
phpfpm的作用和用法
2019/10/10 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
python list转dict示例分享
2014/01/28 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python中enumerate函数代码解析
2017/10/31 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
市场营销方案范文
2014/03/11 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
《迟到》教学反思
2016/02/24 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python