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

document.addEventListener("keyup",function(e){

                console.log(e.keyCode)

})

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input placeholder="输入一些文本" type="text">

        <script>

            var inputText=document.querySelector("input");

            inputText.addEventListener("keyup",function(e){

                if(e.keyCode==13){

                    alert(1)//要执行的内容

                }

            })

        </script>

    </body>

</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. JVM 线上故障排查基本操作 (转)

    前言 对于后端程序员,特别是 Java 程序员来讲,排查线上问题是不可避免的.各种 CPU 飚高,内存溢出,频繁 GC 等等,这些都是令人头疼的问题.楼主同样也遇到过这些问题,那么,遇到这些问题该如何 ...

  2. JMX jconsole 的使用

    JMX 1. JMX简单介绍 JMX的全称为Java Management Extensions. 顾名思义,是管理Java的一种扩展.这种机制可以方便的管理正在运行中的Java程序.常用于管理线程, ...

  3. 开发MT4连接失败最easy忽视的一个错误

    m_factory.WinsockStartup();

  4. 什么是blazor

    blazor是一个微软推出的基于webassembly和C#(面向对象) 以及F#(面向函数)的前端框架 它类似vue react anglar的单页前端框架 只是他不再使用js 或typescrip ...

  5. golang（1）：简介

    golang语言特性: 1. 垃圾回收 a. 内存自动回收,不需要开发人员管理内存,开发人员专注业务实现 b. 只需要new分配内存,不需要释放 2. 天然并发 a. 从语言层面支持并发,非常简单 b ...

  6. 异常-面试题之final,finally和finalize的区别，如果在finally之前有return

    package cn.itcast_07; /* * 面试题: * 1:final,finally和finalize的区别 * final:最终的意思,可以修饰类,成员变量,成员方法 * 修饰类,类不 ...

  7. LLVM源码安装教程

    LLVM4.0源码安装教程 环境:ubuntu16.04 llvm-4.0 clang-4.0 步骤: 1.依赖库安装,注意llvm的编译对gcc版本和cmake版本有要求,请根据版本进行匹配 $ s ...

  8. scrapy-redis 实现分布式爬虫

    分布式爬虫 一 介绍 原来scrapy的Scheduler维护的是本机的任务队列(存放Request对象及其回调函数等信息)+本机的去重队列(存放访问过的url地址) 所以实现分布式爬取的关键就是,找 ...

  9. 4.（基础）tornado应用安全与认证

    这一节我们介绍应用安全与认证,其实中间省略了一个数据库.对于tornado来说,读取数据库的数据,性能的瓶颈还是在数据库上面.关于数据库,我在<>中介绍了sqlalchemy,这是一个工业 ...

  10. 七，ingress及ingress cluster

    目录 Service 类型 namespace 名称空间 Ingress Controller Ingress Ingress-nginx 进行测试 创建对应的后端Pod和Service 创建 Ing ...