如何将键盘焦点赋予 DIV 并将键盘事件处理程序附加到它? [英] How can I give keyboard focus to a DIV and attach keyboard event handlers to it?

查看：29 发布时间：2021/12/19 22:15:19 javascript events keyboard

本文介绍了如何将键盘焦点赋予 DIV 并将键盘事件处理程序附加到它?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建一个应用程序，我希望能够在其中单击由 DIV 表示的矩形，然后使用键盘通过列出键盘事件来移动该 DIV.

我是否可以在文档级别为这些键盘事件使用事件侦听器，我可以在 DIV 级别侦听键盘事件，也许是通过为其提供键盘焦点?

这里有一个简化的示例来说明问题:

<头><身体><div id="outer" style="background-color:#eeeeee;padding:10px">外<div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">希望能够聚焦这个元素并拿起按键

<脚本语言="Javascript">函数 onClick(){document.getElementById('inner').innerHTML="点击";document.getElementById('inner').focus();}//这个处理程序永远不会被调用函数 onKeypressDiv(){document.getElementById('inner').innerHTML="div 上的按键";}函数 onKeypressDoc(){document.getElementById('inner').innerHTML="keypress on doc";}//安装事件处理程序document.getElementById('inner').addEventListener("click", onClick, false);document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);document.addEventListener("keypress", onKeypressDoc, false);

在单击内部 DIV 时，我尝试给它焦点，但随后的键盘事件总是在文档级别接收，而不是我的 DIV 级别事件侦听器.

我是否只需要实现特定于应用程序的键盘焦点概念?

我应该补充一点，我只需要它就可以在 Firefox 中工作.

解决方案

Sorted - 我给目标 DIV 添加了 tabindex 属性，这会导致它拾取键盘事件，例如

这个 div 现在可以有焦点并接收键盘事件

从 http://www.w3 收集的信息.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events.

Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus?

Here's a simplified sample to illustrate the problem:

<html>
<head>
</head>
<body>

<div id="outer" style="background-color:#eeeeee;padding:10px">
outer

   <div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">
   want to be able to focus this element and pick up keypresses
   </div>
</div>

<script language="Javascript">

function onClick()
{
    document.getElementById('inner').innerHTML="clicked";
    document.getElementById('inner').focus();

}

//this handler is never called
function onKeypressDiv()
{
    document.getElementById('inner').innerHTML="keypress on div";
}

function onKeypressDoc()
{
    document.getElementById('inner').innerHTML="keypress on doc";
}

//install event handlers
document.getElementById('inner').addEventListener("click", onClick, false);
document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
document.addEventListener("keypress", onKeypressDoc, false);

</script>

</body>
</html>

On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener.

Do I simply need to implement an application-specific notion of keyboard focus?

I should add I only need this to work in Firefox.

解决方案

Sorted - I added tabindex attribute to the target DIV, which causes it to pick up keyboard events, for example

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Information gleaned from http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html

这篇关于如何将键盘焦点赋予 DIV 并将键盘事件处理程序附加到它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何将键盘焦点赋予 DIV 并将键盘事件处理程序附加到它? [英] How can I give keyboard focus to a DIV and attach keyboard event handlers to it?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何将键盘焦点赋予 DIV 并将键盘事件处理程序附加到它? [英] How can I give keyboard focus to a DIV and attach keyboard event handlers to it?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭