浅谈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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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乱码问题
2012/03/25 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
浅谈django中的认证与登录
2016/10/31 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
培训专员岗位职责
2014/02/26 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
先进工作者个人总结
2015/02/15 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android