代码之家 › 专栏 › 技术社区 › Paul Dixon

如何将键盘焦点赋予DIV并将键盘事件处理程序附加到它上?

keyboard events javascript

Paul Dixon · 技术社区 · 16 年前

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

我可以在DIV级别监听键盘事件,而不是在文档级别使用事件监听器来监听这些键盘事件,也许可以将键盘焦点放在DIV级别?

下面是一个简单的示例来说明这个问题:

<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>

在单击内部的DIV时,我尝试将焦点放在它身上,但随后的键盘事件总是在文档级别而不是我的DIV级别事件监听器上拾取的。

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

我应该补充一下,我只需要这个就可以在火狐中使用。

2 回复 | 直到 8 年前

152

Paul Dixon 16 年前

sorted-i将tabindex属性添加到target div,这会导致它拾取键盘事件,例如

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

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

Peter Bagnall 13 年前

保罗的回答很好,但是你也可以使用ContentEditable,就像这样…

document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();

在某些情况下可能更可取。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前