<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现按下按键触发点击事件</title>
</head>
<body>
<h3>按下 Enter 触发按钮点击事件</h3>
<p>选中输入框,然后按下"Enter" 就会触发按钮的点击事件。</p>
<div>
<input placeholder="输入一些文本" type="text">
<button type="button" onclick="javascript:alert('点击了我或者按下了enter,对不对')">点击我 或者按下enter键</button>
</div>
<script> var input=document.getElementsByTagName("input");
//给input注册按钮事件,用addEventListenner(注意兼容问题)
input.addEventListener("keyup",function(event) {
//要阻止默认事件
event.preventDefault();
//我要的是enter件,也就是enter事件,所以要判断是哪个事件
if(event.keyCode===13){
document.getElementsByTagName("button").click();
} }) </script> <body>
</html>

 

JS实现按下按键触发点击事件的更多相关文章

  1. 为啥使用Iscroll.js之后,a不能触发点击事件?

    原因:是iscroll.js阻止了a的行为. 解决方法:打开iscroll-probe.js,然后找到preventDefaultException方法. 然后修改为: // preventDefau ...

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

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

  3. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  4. 解决JavaScript拖动时同时触发点击事件的BUG

    在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...

  5. 关于AJAX异步加载节点无法触发点击事件问题的解决方式

    做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...

  6. view.performClick()触发点击事件

    1.主要作用 自动触发控件的点击事件 2.界面的布局文件  activity_main.xml <RelativeLayout xmlns:android="http://schema ...

  7. 可以触发点击事件并变色的UILabel

    可以触发点击事件并变色的UILabel 谁说UILabel不能够当做button处理点击事件呢?今天,笔者就像大家提供一个改造过的,能够触发点击事件并变色的UILabel:) 效果图: 还能当做计时器 ...

  8. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  9. Echarts如何添加鼠标点击事件?防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

随机推荐

  1. 洛谷—— P1629 邮递员送信

    https://www.luogu.org/problem/show?pid=1629 题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比 ...

  2. jquery20--animate() : 运动的方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. android 图片特效处理之模糊效果

    这篇将讲到图片特效处理的模糊效果.跟前面一样是对像素点进行处理,算法是通用的,但耗时会更长,至于为什么,看了下面的代码你就会明白. 算法: 一.简单算法:将像素点周围八个点包括自身一共九个点的RGB值 ...

  4. linux的vi或vim文件时,怎样消除刚才查找字符串的高亮?

    有时候,自己在通过/查找字符串时,会出现: 但是呢,当你保存,再次进入还是会出现这么花的高亮显示,很令人苦恼. 解决办法 随便,输入没有的字符串,即可解决. 如下 /sssssssssssssssss ...

  5. 分享一个vue常用的ui控件

      vue学习文档 http://www.jianshu.com/p/8a272fc4e8e8 vux github ui demo:https://github.com/airyland/vux M ...

  6. c# 用代码来设置程序的PrivatePath

    原文:c# 用代码来设置程序的PrivatePath 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sweety820/article/detail ...

  7. Eclipse怎样把文件系统形式的项目作为工程直接导入?

    导入的时候,选择已经存在的工程,如果选择文件系统,可能会提示没有项目可以导入.这个时候,可以从其它Eclipse项目下,copy一份.project文件过来,修改源文件中的工程名字.如果需要,也可以c ...

  8. 阅读笔记—JSP

    JSP页面概述 JSP(JavaServer Page)是一种动态页面技术,它在java web应用中主要实现表现逻辑.JSP页面是在HTML页面中嵌入JSP元素的动态Web页面,一般来说JSP页面中 ...

  9. Webservice银行报文接口设计

      Preface: 合理的软件架构设计其好处是不言而喻的,系统具有清晰的软件结构,良好的可扩展性,类的职能单一明确,系统的复杂度底.此前的一个实际项目中总结了些关于OO设计的实际应用,主要是围绕'高 ...

  10. Method and apparatus for transitioning between instruction sets in a processor

    A data processor (104) is described. The data processor (104) is capable of decoding and executing a ...