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

Posted 2023-02-19

【中文标题】是否可以使用 JavaScript focus() 函数专注于 <div> ？

【英文标题】：Is it possible to focus on a <div> using JavaScript focus() function?

【发布时间】：2011-04-09 01:26:30

【问题描述】：

是否可以使用 javascript focus() 函数专注于 <div>？

我有一个<div> 标签

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

我正在尝试专注于上述<div> 使用：

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

但它不起作用。有人可以提出一些建议吗....？

【问题讨论】：

当你“专注”它时你想发生什么？ div 不接受输入，所以你想闪烁边框，还是闪烁背景高亮等？

@Michael，是的，我需要那个 来引起用户的注意...

Which html elements can receive focus?的可能重复

@MichaelShimmins 和其他任何人，如果您将 contenteditable 设置为 true，则 元素可以接受输入。 （我询问的原因）

@MichaelShimmins divs 可以接受溢出的输入并显示滚动条。当带有滚动条的div 获得焦点时，箭头键将滚动其内容（而不是其他元素的内容，例如body）。

【参考方案1】：

是的 - 这是可能的。为此，您需要分配一个 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>

显然，如果您可以通过脚本聚焦而无法通过其他输入法聚焦的元素（尤其是当用户仅使用键盘或类似受限时），这显然是一种耻辱。还有一大堆标准元素，默认情况下是可聚焦的，并且包含语义信息以帮助用户。明智地使用这些知识。

【讨论】：

@Michael Shimmins，这使得元素可以通过focus() 聚焦（以非标准方式！）。

@Olical - 我很确定这正是它在可能答案的最后一行中所说的。如果您认为存在需要修改的问题，请告诉我。

如果不清楚，给元素添加tabindex会使其成为焦点，这会启用focus()和blur()方法，然后你可以像这样触发焦点：@ 987654329@

嗨@SteveOwen - 它似乎仍在Firefox v42中工作。我已在此答案中添加了一个 sn-p，因此您可以运行它并进行测试。

@SteveOwen 使用window.location.hash = ... 是这样做的方法。焦点并不意味着“进入视野”，它只是意味着将焦点放在该元素上。

【参考方案2】：

window.location.hash = '#tries';

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

【讨论】：

@Casey Chu：它在 ie 中可以正常工作，但在 Firefox 中却不行，你知道吗？

它在某些 Chrome 版本中不起作用......但是，@vinoths 解决方案可以做到

这行得通，但是......使用 Angular 你会遇到问题！

@CarlosVerdes;有 Angular 的解决方案吗？

没有回答“焦点”问题，这不应该是正确的答案。就我而言，我想专注于“contentEditable”的 div，而你的技巧没有帮助。

【参考方案3】：

document.getElementById('tries').scrollIntoView() 有效。当您有固定定位时，这比window.location.hash 效果更好。

【讨论】：

请注意，此解决方案不适用于 IE、Opera 或 Safari。

我刚刚在 Chrome 65 中尝试过，但它不起作用。覆盖 div 滚动到视图中，但焦点仍在背景 div 中。我所知道的唯一可靠的方法是在覆盖 div 中有一个可选项卡元素（使用 tabindex 属性）并在该元素上使用 focus()。

@om-the-eternity 已经说过他希望 div 引起用户的注意，所以他需要的是不要真正集中注意力（即使在工作时这样做也不正确） div，但是把它带到屏幕上，这就解决了

如果我在 Chrome 中执行此操作，它会不断滚动回仍然聚焦的输入字段。特别是如果页面尚未加载完毕。

【参考方案4】：

你可以使用tabindex

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

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

如果给定值“-1”，则该元素不能被选项卡，但焦点 可以通过编程方式赋予元素（使用 element.focus()）。 如果给定值 0，则元素可以通过键盘获得焦点 并落入文档的跳转流程。值大于 0 创建一个优先级，其中 1 是最重要的。

【讨论】：

哇，谢谢你的绝招。谢谢！否则我不会想到这一点。

救命稻草，谢谢。在 Edge 中，一个 div 可以聚焦，但在 Chrome 中没有这个技巧。接受的答案很好，但我不想在网址中添加额外的部分。

拯救生命。适用于 chrome 和 firefox

【参考方案5】：

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

【讨论】：

这适用于我在 Chromium/Chrome 46 中仅与 $('#inner').focus(); 结合使用

【参考方案6】：

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>

【讨论】：

不错的答案，但最好也为您的代码示例添加一些解释。

【参考方案7】：

我想提出类似 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;

【参考方案8】：

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

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


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

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