原理:按下enter的事件属于键盘事件,我们可以先用下面函数来获取enter的键码(键盘上的按键都有各自的键码),通过这个键码可以来判断按下的是哪个键

  1. document.addEventListener("keyup",function(e){
  2. console.log(e.keyCode)
  3. })

通过上面函数我们知道enter的键码是  13,那么最后只需要判断一下,键盘按下时键码是13时就执行我们需要的内容,就可以实现我们要的效果了。

这个效果通常用于按下enter执行搜索等操作。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <input placeholder="输入一些文本" type="text">
  9. <script>
  10. var inputText=document.querySelector("input");
  11. inputText.addEventListener("keyup",function(e){
  12. if(e.keyCode==13){
  13. alert(1)//要执行的内容
  14. }
  15. })
  16. </script>
  17. </body>
  18. </html>

按下enter触发事件的更多相关文章

  1. angular 按下回车键触发事件

    angularJs  按下回车键触发事件这个功能很简单,但是今天的却让我掉坑很久.... 由于我的页面上有两个不同方法都传$event事件,如search($event)和create($event) ...

  2. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

  3. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  4. vue中Enter触发登录事件和javascript中Enter触发点击事件

    created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...

  5. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

  6. 屏蔽Enter触发的事件

    无论是 <button type="button" onclick="console.log('123');">123</button> ...

  7. jQuery实现按Enter键触发事件?

    按Enter触发 $(function(){ document.onkeydown = function(e){ var ev = document.all ? window.event : e; ) ...

  8. enter键触发事件的清除

    使用iframe弹窗时 父级页面 初始化的时候 给enter键绑定了事件 在子页面中 按下enter键会触发 而报错,此时在本页面的初始化的时候 将enter键绑定的方法取消 即可: $(docume ...

  9. 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js

    <script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...

随机推荐

  1. 笛卡尔树--牛客第四场(sequence)

    思路: O(n)建一颗笛卡尔树,再O(n)dfs向上合并答案就行了. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include &l ...

  2. 如何实现一个简化版的 jQuery

    对于操作 DOM 来说,jQuery 是非常方便的一个库,虽然如今随着 React, Vue 之类框架的流行,jQuery 用得越来越少了,但是其中很多思想还是非常值得我们学习的,这篇文章将介绍如何从 ...

  3. CentOS7 Python3安装redis

    CentOS7安装配置Redis 第一步:下载redis安装包 wget http://download.redis.io/releases/redis-4.0.9.tar.gz 想下载哪个版本可以复 ...

  4. 1.bash总体介绍

    1.总体介绍1.1 什么是Bash?Bash(Borune-Again SHell)是一个用于Linux操作系统的shell,即命令解释器Bash与sh兼容,并从ksh和csh引进了一些有用的功能,在 ...

  5. Hadoop单节点启动分布式伪集群

    emm~ 写这篇博客只是手痒,因为开发环境用单节点就够了,生产环境肯定是真实集群,所以这个伪分布式纯属娱乐而已. 配置HDFS1. 安装好一台hadoop,可以参考这篇博客.2. 在hadoop目录下 ...

  6. JavaScript快速排序法实现数组排序

    大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 var arr = [10,8,6,9,1,7,1,13,5,1,9]; / ...

  7. 移动端布局-rem

    created(){ // 设置根字号 // 屏幕宽度 setHTML(); // addEventListener()不冲突 window.addEventListener('resize', se ...

  8. 正则替换replace中$1的用法

    一.repalce定义 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 1 2 3 4 5 stringObject.replace(regexp/substr,repla ...

  9. 转 eclipse 快捷键

    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...

  10. 第十七篇 JS验证form表单

    JS验证form表单   这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...