是否有可能集中在一个<div>使用JavaScript的焦点()函数?

我有一个<div>标签

<div id="tries">You have 3 tries left</div>

我试图集中在上面的<div>使用:

document.getElementById('tries').focus();

但这并不奏效。谁能给点建议....?


当前回答

. getelementbyid(试).scrollIntoView()的工作原理。当你有固定的定位时,这比window.location.hash更好。

其他回答

是的,这是可能的。为了做到这一点,你需要分配一个tabindex…

<div tabindex="0">Hello World</div>

tabindex为0会将标签“置于页面的自然标签顺序中”。更高的数字将给出特定的优先顺序,其中1将是第一,2将是第二,依此类推。

您也可以给一个tabindex -1,这将使div只能通过脚本而不是用户来聚焦。

. getelementbyid(“测试”)。Onclick = function () { . getelementbyid(“照本宣科”).focus (); }; div:专注{ background - color:水; } <div>元素X(不可对焦)</div> <div tabindex="0">元素Y(用户或脚本可聚焦)</div> <div tabindex="-1" id="scripted">Element Z(仅脚本可聚焦)</div> <div id="test">设置焦点到元素Z</div>

显然,如果一个元素可以通过脚本聚焦,但却不能通过其他输入法聚焦,这是一种遗憾(特别是当用户只能使用键盘或受到类似限制时)。还有一大堆标准元素,默认情况下是可聚焦的,并有语义信息来帮助用户。明智地使用这些知识。

. getelementbyid(“测试”)。Onclick = function () { . getelementbyid(“照本宣科”).focus (); }; div:专注{ background - color:水; } <div>元素X(不可对焦)</div> <div tabindex="0">元素Y(用户或脚本可聚焦)</div> <div tabindex="-1" id="scripted">Element Z(仅脚本可聚焦)</div> <div id="test">设置焦点到元素Z</div>

window.location.hash = '#tries';

这将滚动到有问题的元素,本质上是“聚焦”它。

. getelementbyid(试).scrollIntoView()的工作原理。当你有固定的定位时,这比window.location.hash更好。

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