在div监听键盘事件获取不到的问题

在给如div等元素绑定键盘事件(如keydown)时, 会发现绑定是失效的。

解决方法:

给当前元素增加 tabindex 属性:

原理:

div等非输入性质的元素(与其对应的可输入性元素有input, textarea), 是不可被聚焦的。 所以无法监听其的键盘事件。

而通过增加 tabindex 属性,可以指定该元素可触焦。

关于tabindex(引自MDN):

tabindex 全局属性 是个整数,表示元素(如果可聚焦)是否能够接受输入焦点。 如果它应该参与键盘序列导航,那么就是它的位置。

它可以设为多种值:

tabindex=负值 (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。

tabindex="0" ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。

tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。

根据键盘序列导航的顺序,值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

如果我们在

上设置了 tabindex 属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置 tabindex。注:tabindex 的最大值不应超过 32767。如果没有指定,它的默认值为 -1。

相关连接:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex;

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/tabIndex

原文地址:https://www.cnblogs.com/Vick2016/p/9934705.html

时间: 2024-10-11 16:20:08

在div监听键盘事件获取不到的问题的相关文章

Js监听键盘事件

表单提交的时候大多数用户都习惯用回车键来进行提交,页面接受回车键的处理如下: if(navigator.userAgent.indexOf("MSIE")>0) {   //IE document.onkeydown=function(){ if(13 == event.keyCode){ alert('browser is ie and enter key down'); } } }else{   //非IE window.onkeydown=function(){ if(13

监听键盘事件

注册监听键盘事件: 1 // 键盘即将隐藏 2 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil]; 3 4 // 键盘已经隐藏 5 [[NSNotificationCenter defaultCenter] addObserver:self selector:@sel

注册监听键盘事件的通知

注册监听键盘事件的通知[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardShow:) name:UIK

Vue--名称案例,监听键盘事件@keyup--实时获取数据-----watch属性方法获取

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jQuery监听键盘事件及相关操作使用

一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: $(document).keydown(function(event){ console.log(event.keyCode); }); tips: 上面例子中,event.keyCode就

iOS监听键盘事件

#pragma mark - view life cycle - (void)viewDidLoad { [super viewDidLoad]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCent

python 监听键盘事件

#coding=utf-8 from tkinter import * root=Tk() def callback(event): print("点击键盘",repr(event.char)) frame=Frame(root,width=200,height=200) frame.bind("<Key>",callback) frame.focus_set() frame.pack() mainloop() 效果图: 原文地址:https://www

Atitit。监听键盘上下左右方向键事件java js jquery c#.net

Atitit.监听键盘上下左右方向键事件java js jquery   c#.net 1. Keyword1 2. 通用的实现流程1 3. Js的实现1 3.1. Bind control ,event handeler1 3.2. key_press_hadler4up2 4. Java的实现3 5. C# .net winformn4 6. 参考4 1. Keyword 键盘事件  方向键   上下左右  按键监听 2. 通用的实现流程 Bind (control,key_eventHan

iOS 监听键盘高度,输入框上升

1 //设置输入框 ---<因为输入框用了get方法,所以第一次调用输入框要用self 调用>: 2 self.textlab.frame=CGRectMake(20, 420, 250, 30); 3 _textlab.layer.borderColor=[UIColor blueColor].CGColor; 4 _textlab.layer.borderWidth= 0.5f; 5 _textlab.backgroundColor=[UIColor colorWithRed:0.830