有没有可能专注于一个<div>使用JavaScript的focus()函数?

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

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

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

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

document.getElementById('test').onclick = function () {
document.getElementById('scripted').focus();
};

div:focus {
background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

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

要让边界闪光，你可以这样做:

function focusTries() {
document.getElementById('tries').style.border = 'solid 1px #ff0000;'
setTimeout ( clearBorder(), 1000 );
}


function clearBorder() {
document.getElementById('tries').style.border = '';
}

这将使边界坚实的红色1秒，然后再删除它。

window.location.hash = '#tries';

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

我想建议一些类似Michael Shimmin的东西，但没有硬编码元素，或应用于它的CSS。

我只使用jQuery添加/删除类，如果你不想使用jQuery，你只需要一个替换添加/删除类

——Javascript

function highlight(el, durationMs) {
el = $(el);
el.addClass('highlighted');
setTimeout(function() {
el.removeClass('highlighted')
}, durationMs || 1000);
}


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

CSS——

#tries {
border: 1px solid gray;
}


#tries.highlighted {
border: 3px solid red;
}

document.getElementById('tries').scrollIntoView()作品。当你有固定的定位时，这比window.location.hash工作得更好。

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

你可以使用tabindex

<div tabindex="-1"  id="tries"></div>

tabindex值可以允许一些有趣的行为。

• 如果给定值为"-1"，则元素不能被标签化，而是被聚焦 可以通过编程方式赋给元素(使用element.focus()) 如果给定值为0，元素可以通过键盘聚焦 并归入文档的选项卡流。值大于
. 0创建一个优先级，其中1为最重要的