解决：div获取不到键盘事件

最新推荐文章于 2023-10-06 17:29:30 发布
最新推荐文章于 2023-10-06 17:29:30 发布
阅读量771 收藏 1
点赞数 1
分类专栏： 网页 文章标签： css3 html5
本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺
本文链接：https://blog.csdn.net/qq_43319748/article/details/125472990
版权

今天给div添加按键监听的时候才发现，居然拿不到监听事件

查阅资料后发现，原来html元素还有按焦点分类的情况，因为键盘与鼠标不同：

（1）鼠标可以通过移动，选择触发的元素

（2）键盘不知道应该将按键信息传递给哪个元素，也不可能每次输入都将鼠标移动到元素内部，再进行键盘输入........

但是因为有了焦点这个概念，一般情况焦点最多存在一个，于是键盘就可以根据焦点所在元素进行输出。

我们可以通过元素自带的tabindex属性为div添加可以拥有焦点的权限。

tabindex="-1"     元素拥有焦点权限，选中不会表现出来，不会被tab切换时选中。

tabindex="1"      元素拥有焦点权限，选中会表现出来，会被tab切换选中

tab切换焦点元素时，会根据tabindex值大小决定先后顺序，值越小，优先级越高，越早被选中，值越大，越晚被选中。

添加该属性后，你会发现，div可以接收到键盘事件了

 

学习使我快乐——玉祥
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML中按键怎么用键盘触发,如何让div span等元素能响应键盘事件操作指南
weixin_42268494的博客
06-08 818
在我这几天的工作中遇到了一个问题，google了一下找到了解决方案，不过是英文的，我简单翻译下让更多的人能看懂译文如下：我有一个可编辑的div，并且在DIV里面还有一个可编辑的span，我想要让span能响应键盘事件，这里是测试JS代码：$(function(){$('#someid').keypress(function(event){alert('test');});});这里是测试html代...
如何让div span等元素能响应键盘事件操作指南
12-09
在我这几天的工作中遇到了一个问题，google了一下找到了解决方案，不过是英文的，我简单翻译下让更多的人能看懂 译文如下： 我有一个可编辑的div，并且在DIV里面还有一个可编辑的span，我想要让span能响应键盘事件， 这里是测试JS代码： 代码如下: $(function() { $(‘#someid’).keypress(function(event){alert(‘test’);}); }); 这里是测试html代码： 代码如下: <div id=”mydiv” contenteditable=”true”> editable follows:<span id=”someid”
Vue页面监听键盘按键的多种方法
最新发布
一步一个脚印，踏实努力，向着目标前进
10-06 1万+
在Vue页面中，可以使用多种方法来监听键盘按键。@keydown@keyup
【JS学习-DOM】键盘事件--及div元素设置键盘事件的失效的额外处理踩坑
m0_61486963的博客
08-03 1552
【JS学习-DOM】键盘事件--及div元素设置键盘事件的失效的额外处理踩坑
点击时监听键盘事件,比如ctril多选
Web_Notes的博客
12-13 904
fsdf
dom中监听事件问题（addEventListener）
lgp199881的博客
02-06 973
事件监听的问题
js中键盘事件实例简析
12-10
JavaScript中的键盘事件是用于捕获用户在键盘上按下或释放键时发生的事件。这些事件对于创建交互式的网页和应用程序非常有用，例如响应用户的输入或控制游戏。本文将深入解析JavaScript键盘事件及其应用，并针对给定...
vue 通过绑定事件获取当前行的id操作
11-20
在这个例子中，可以通过`console.log(e)`打印事件对象，以检查是否能从中获取到productId。 ```javascript router(e) { console.log(e); } ``` 补充知识部分提到了Vue.js的其他事件处理，包括单击、双击、鼠标和...
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
10-24
`onkeyup`事件绑定了一个名为`SwapTxt()`的JavaScript函数，这意味着每当用户释放键盘上的键时，该函数将被调用。 - `<p>`：定义了一个段落，ID为`lyny`，它的作用是展示文本框中的内容。初始内容提示用户输入文字...
js实现键盘操作实现div的移动或改变的原理及代码
12-09
当检测到键盘事件后，根据按键值改变`div`的位置。这通常通过修改`div`的`style.left`和`style.top`属性来实现。这两个属性控制元素的左边缘和顶边缘距离其最近定位祖先的距离。使用`setInterval`创建一个定时器，...
DIV元素响应键盘事件源码
01-21
这是博客对应的源码，供朋友们下载分享，博文解析了DIV元素响应键盘事件的原理，实现方法，对应博客地址：http://blog.csdn.net/harvic880925/article/details/8524720
div移动 输入框不能输入的问题
09-05
总的来说，解决“div移动导致输入框不能输入”的问题，关键在于理解和利用浏览器的渲染规则，以及JavaScript的交互功能，通过调整元素的z-index和使用`focus()`方法，确保用户能够在需要时与输入框进行有效的交互。
div绑定键盘点击事件
qq_42244911的博客
07-07 1021
【代码】div绑定键盘点击事件。
全局的键盘监听事件
Thea12138的博客
09-19 679
放在vue 的created()或者mounted ()中，可对整个文档进行键盘事件监听。
addEventListener( )-事件监听
chengyu12138的博客
10-01 1130
()方法，即为；且同一元素目标可重复添加，不会覆盖之前相同事件；可以使用removeEventListener()方法来移除事件的监听。对象.addEventListener('事件', 函数)例如当我点击按钮时：事件类型：1.鼠标事件：click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开2.焦点事件 focus获得焦点 blur 失去焦点3.键盘触发：keydown 键盘按下触发 keyup键盘松开触发文本事件： input 用户输入事件。
JavaScript 事件监听
weixin_52053631的博客
07-25 329
用什么方式触发，eg:鼠标单击click、鼠标经过mouseover登。：哪个dom元素被触发了，要获取dom元素。
让div也可以获得keydown事件
weixin_41791737的博客
05-13 1310
最近遇到问题就是想监听某个div的keydown事件； 但是div没有keydown事件，只有document和input才有keydown事件 那么如何让div也有keydown事件呢？ 1、在div上添加tabindex属性 在这里插入代码片 <div id="trapezoid-box" tabindex="0"> tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。 tab
网页DIV接收键盘按键消息解决办法
guizicjj的专栏
04-21 609
DIV 接收键盘按键 keydown
在div监听键盘事件获取不到的问题
weixin_30522183的博客
11-09 522
在给如div等元素绑定键盘事件(如keydown)时， 会发现绑定是失效的。 解决方法: 给当前元素增加 tabindex 属性: 原理: div等非输入性质的元素(与其对应的可输入性元素有input, textarea)， 是不可被聚焦的。 所以无法监听其的键盘事件。 而通过增加 tabindex 属性，可以指定该元素可触焦。 关于tabindex(引自MDN): tabindex...
js用键盘事件按下跳跃后，top减少，我要键盘事件松开后，top适应另外一个div最高点
09-26
### 回答1： 可以在键盘事件的回调函数中添加条件判断...综上所述，通过上述的键盘事件监听函数，我们可以在按下键盘时使目标元素的top值减少，并在松开键盘时将其设置为另一个div的最高点，从而实现top值的适应变化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值