是否有可能专注于使用JavaScript焦点（）函数的<div>？

是否有可能专注于使用JavaScript focus()函数的<div> ？

我有一个<div>标签

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

我正在努力把重点放在上面的<div>使用：

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

但它不起作用。 有人可以build议一些东西….？

Answer 1

 window.location.hash = '#tries'; 

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

Answer 2

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

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

0的tabindex将把标签“以页面的自然标签顺序”。 更高的数字会给它一个特定的优先顺序，其中1将是第一个，第二个等等。

你也可以给一个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> 

Answer 3

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

Answer 4

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

Answer 5

我想提出一些像Michael Shimmin这样的东西，但是不要像元素或应用到它的CSS那样硬编码。

我只使用jQuery的添加/删除类，如果你不想使用jquery，你只需要一个replaceadd / removeClass

–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; } 

Answer 6

你可以使用tabindex

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

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

• 如果给定值为“-1”，则该元素不能被标签化，而是可以以编程方式将焦点赋予该元素（使用element.focus（））。
• 如果给定值0，则元素可以通过键盘聚焦并落入文档的标签stream中。 大于0的值将创build一个优先级别，1是最重要的。

Answer 7

要使边框闪烁，你可以这样做：

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

这将使边框呈红色持续1秒，然后再次移除。