gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 02:47:01 24 4
gpt4 key购买 nike

我正在构建一个应用程序,我希望能够在其中单击由 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 级别事件监听器中拾取。

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

我应该补充一点,我只需要它在 Firefox 中工作。

最佳答案

已排序 - 我将 tabindex 属性添加到目标 DIV,这会导致它拾取键盘事件,例如

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

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

关于javascript - 如何将键盘焦点赋予 DIV 并将键盘事件处理程序附加到它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/148361/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com