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

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

我有一个 <div> 标签

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

我正在努力关注以上 <div> 使用:

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

但它不起作用 . 有人可以提出建议....

回答(8)

3 years ago

window.location.hash = '#tries';

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

3 years ago

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

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

tabindex为0将使标记“按页面的自然Tab键顺序” . 较高的数字将赋予其特定的优先顺序,其中1将是第一个,2秒,依此类推 .

您还可以给出-1的tabindex,这将使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>

显然,拥有一个可以通过脚本聚焦的元素是一种耻辱,你无法通过其他输入法聚焦(特别是如果用户只是键盘或类似的约束) . 还有一大堆标准元素默认是可聚焦的,并且具有语义信息以帮助用户 . 明智地使用这些知识 .

3 years ago

document.getElementById('tries').scrollIntoView() 有效 . 当你有固定的定位时,这比_1857526更好 .

3 years ago

您可以使用tabindex

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

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

  • 如果给定值"-1",则元素无法选项卡,但可以通过编程方式将焦点赋予元素(使用element.focus()) .

  • 如果给定值为0,则可以通过键盘聚焦元素并使其落入文档的标签流中 . 大于0的值创建优先级,1是最重要的 .

3 years ago

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

3 years ago

我想建议像Michael Shimmin这样的东西,但没有像元素那样的硬编码,或者应用于它的CSS .

我只使用jQuery进行添加/删除类,如果你不想使用jquery,你只需要替换add / 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;
}

3 years ago

这也将浏览器滚动到具有id的相应元素

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

如果要滚动整个窗口, target.parentNode.scrollTop 可以用 window.scrollTop 替换

3 years ago

要使边框闪烁,您可以执行以下操作:

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

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

这将使边框呈红色持续1秒,然后再次将其删除 .