DIV元素响应键盘事件

最新推荐文章于 2023-02-13 22:38:04 发布
最新推荐文章于 2023-02-13 22:38:04 发布
阅读量509 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18609637075/article/details/40894869
版权

解析：能够响应键盘事件的元素是有限的，它们是：form元素、a标签元素，window、document这样的元素；

但其它元素如果想响应键盘事件则必须具备两个基本要素：

1、 具有tabindex属性

2、  获取焦点；

<div id="gridOrgInfo" tabindex="1"></div>

$("gridOrgInfo").live("keydown",function(e){

     alert(e);

});


a18609637075
关注
专栏目录
DIV元素响应键盘事件源码
01-21
这是博客对应的源码，供朋友们下载分享，博文解析了DIV元素响应键盘事件的原理，实现方法，对应博客地址：http://blog.csdn.net/harvic880925/article/details/8524720
如何让div span等元素能响应键盘事件操作指南
09-05
在我这几天的工作中遇到了一个问题，我有一个可编辑的div，并且在DIV里面还有一个可编辑的span，我想要让span能响应键盘事，想实现这种效果，应该如何实践呢
键盘事件 控制div移动
Gnaf12345的博客
05-22 235
第一种： 不太适用，div移动的不顺利 window.onkeydown=function(e){ var l=dOk.offsetLeft; var t=dOk.offsetTop; if(e.keyCode===37){ l-=5; }else if(e.keyCode===38){ t-=5; }else if(e.keyCode===39){ l+=5; }else if(e.keyCode===40){ t+=5; } dOk.style.left=l+'px'; dO.
让div span等元素能响应键盘事件
weixin_33991418的博客
11-13 243
在我这几天的工作中遇到了一个问题，google了一下找到了解决方案，不过是英文的，我简单翻译下让更多的人能看懂 译文如下： 我有一个可编辑的div，并且在DIV里面还有一个可编辑的span，我想要让span能响应键盘事件， 这里是测试JS代码： $(function() { $('#someid').keypress(function(event){alert('test'...
vue实现给div绑定keyup的enter事件
11-19
在Vue.js中，给`div`元素绑定`keyup.enter`事件并不直接有效，因为`div`元素默认不响应键盘事件。然而，通过一些技巧，我们可以实现这个功能，使其能够监听到回车键(`Enter`)的按下。以下是实现这一功能的具体步骤和...
jQuery实现Div拖动+键盘控制综合效果的方法
12-02
3. 键盘事件监听（`keyup`）以响应键盘输入，控制Div的滚动。 4. 可能存在的额外逻辑处理函数（如`change`），用于处理与用户交互相关的其他任务。 这个实现可以作为一个基础框架，根据实际需求进行扩展和优化，...
通过键盘事件实现div移动
weixin_43706763的博客
08-09 140
通过键盘事件实现div移动 <style> .box { width: 200px; height: 200px; background-color: skyblue; position: absolute; top: 200px; left: 200px; } </style> </he
div上绑定keyDown事件
qq_39409541的博客
02-13 1792
tabindex的用法，keydown，keyup，keypress事件
javascript之键盘事件案例，按一下键div自动移动
persistsss的博客
08-26 415
键盘事件案例，w,a,s,d键按一下div自动移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
处理DIV元素嵌套情况下的事件响应
fyl_077的专栏
07-20 1041
DIV元素在嵌套情况下响应事件时会发生重叠，比如下例： 点击DIV0时只会响应DIV0的事件处理，但点击DIV1时会先响应DIV1事件，然后又响应DIV0事件。 这通常是不符合我们的要求的。怎么解决呢？ <div id="DIV0" style="background:blue;width:500px;height:100px;" align="center"  onclick="cl
【JS学习-DOM】键盘事件--及div元素设置键盘事件的失效的额外处理踩坑
m0_61486963的博客
08-03 1663
【JS学习-DOM】键盘事件--及div元素设置键盘事件的失效的额外处理踩坑
在div监听键盘事件获取不到的问题
weixin_30522183的博客
11-09 541
在给如div等元素绑定键盘事件(如keydown)时， 会发现绑定是失效的。 解决方法: 给当前元素增加 tabindex 属性: 原理: div等非输入性质的元素(与其对应的可输入性元素有input, textarea)， 是不可被聚焦的。 所以无法监听其的键盘事件。 而通过增加 tabindex 属性，可以指定该元素可触焦。 关于tabindex(引自MDN): tabindex...
非表单元素添加键盘监听事件
weixin_42369612的博客
03-30 561
div及其他非表单标签如何添加键盘监听事件? input和一些表单标签是可以添加键盘监听事件 需求:在一个搜索区域内,只要按回车键就能够执行搜索功能 问题:搜索区域并不是一个表单元素,也不是整个window页面,而是一个div标签 导致无法在表单元素上注册事件,也无法在window上注册事件来监听键盘事件 解决方案: 在div标签上添加键盘监听事件来完成需求 尝试在div标签上添加键盘监听事件,发现无法触发事件 后来发现能够触发键盘监听事件元素只有那些表单元素,那些有onfocus属性的标签才可以触发键盘监
解决：div获取不到键盘事件
学习使我快乐_玉祥
06-26 834
今天给div添加按键监听的时候才发现，居然拿不到监听事件查阅资料后发现，原来html元素还有按焦点分类的情况，因为键盘与鼠标不同：（1）鼠标可以通过移动，选择触发的元素（2）键盘不知道应该将按键信息传递给哪个元素，也不可能每次输入都将鼠标移动到元素内部，再进行键盘输入........但是因为有了焦点这个概念，一般情况焦点最多存在一个，于是键盘就可以根据焦点所在元素进行输出。我们可以通过元素自带的tabindex属性为div添加可以拥有焦点的权限。tabindex="-1" 元素拥有焦点权限，选中不会
div添加点击事件
Aquilian的专栏
08-12 9656
看了网上的一堆答案，都没法使用，不是监听方法无效，就是无响应，试了很多办法，终于搞定，在此分享下，帮助一样踩坑的童鞋： <div onclick="javascript:toSubmit();"> 其中“javascript:”必须要加。 ...
HTML中按键怎么用键盘触发,如何让div span等元素能响应键盘事件操作指南
weixin_42268494的博客
06-08 839
在我这几天的工作中遇到了一个问题，google了一下找到了解决方案，不过是英文的，我简单翻译下让更多的人能看懂译文如下：我有一个可编辑的div，并且在DIV里面还有一个可编辑的span，我想要让span能响应键盘事件，这里是测试JS代码：$(function(){$('#someid').keypress(function(event){alert('test');});});这里是测试html代...
vue中div键盘事件
最新发布
05-30
`div` 元素默认情况下是无法响应键盘事件的，因为它没有 `tabindex` 属性，也就是说它无法被关注（focus）。但是，你可以通过将 `div` 元素设置为可关注（focusable）来实现键盘事件的监听。具体实现方式如下： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值