html5标签div可绑定键盘事件方法

我们知道键盘事件一般用在input这些可以获取焦点的元素上，但是作为div，尽管官方上说可以绑定键盘事件，但是我写了以后发现不生效，于是找答案。

果然，找到了一个神器：tabindex

它是html5标签的一个属性，默认它的值是-1也就是不可以，在div上，我们要设置这个值不超过999就可以了。

document.querySelector(‘div‘).setAttribute("tabindex", 1)&&document.querySelector(‘div‘).addEventListener("keyup", functionName);

原文地址：https://www.cnblogs.com/webSong/p/9041034.html

时间： 2024-10-13 04:59:33

html5标签div可绑定键盘事件方法的相关文章

在页面给按钮绑定键盘事件

$(function(){ $(document).keyup(function(event){ if (event.keyCode == 13 ) { save(); } }); })

原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件. 在form中, submit的快捷键是 enter,reset的快捷键是 esc.不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick

多个相同class节点绑定同一事件

案例: <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1

Vue2键盘事件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件键盘事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

JQ中bind(),live(),delegate()事件方法的区别

[导读] bind(), live(), 和 delegate()这三个方法的区别并不是非常明显.弄清楚这些区别对我们写出简介的代码和预防我们的应用中出现bugs是非常有帮助的. jQuery团队在1 7版本中发布了一个用于绑定事件的新方法叫 bind(), .live(), 和 .delegate()这三个方法的区别并不是非常明显.弄清楚这些区别对我们写出简介的代码和预防我们的应用中出现bugs是非常有帮助的. jQuery团队在1.7版本中发布了一个用于绑定事件的新方法叫做on.这个方法包含

easyui-datetimebox 控件绑定双击事件实现自动选中当前日期时间

本方法是在不改变原 js 的情况下,通过扩展方法来实现本目的首先在 datetimebox 控件中扩展一个绑定双击事件的方法 1 $.extend($.fn.datetimebox.methods, { 2 //绑定双击事件方法 3 bindDblClick: function (jq) { 4 var panel = $(jq).combo("panel"); 5 panel.find(".calendar-dtable tbody").unbind(&qu

事件注册 DOM事件流事件对象（常用属性，方法）事件委派（鼠标，键盘事件对象）

注册事件概述给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统注册方式:利用 on 开头的事件:例如:onclick:注册事件的唯一性,后面的注册事件会把前面的覆盖方法监听注册方式:addEventListener()IE9+:IE9以前用 attacthEvent()代替:会按照注册顺序依次执行没有唯一性的问题 addEventListener() 事件监听方式 eventTarget.addEventListener(type, listene

HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理,让其进行兼容方法一:javascript code <!--[if lt IE9]> <script> (function() { if (!/*@[email protected]*/0) return; var e = "abbr, article, aside, a

JQuery实现click事件绑定与触发方法分析

原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为html处理事件的原始方法,使得html和js过分耦合, 即表现层代码和行为层代码耦合: <html> <head> <script src="./jquery.js"></script> </head> <body>