首页 文章

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

提问于
浏览 次
174

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

我有一个 <div> 标签

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

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

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

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

javascript focus

8 回答

  • 67
    window.location.hash = '#tries';

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

    回复于
  • 11

    是的 - 这是可能的 . 为了做到这一点，你需要分配一个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>

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

    回复于
  • 2

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

    回复于
  • 1

    您可以使用tabindex

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

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

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

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

    回复于
  • 0
    <div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>
    回复于
  • 87

    我想建议像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;
}
    回复于
  • 15

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

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

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

    回复于
  • 350

    要使边框闪烁，您可以执行以下操作：

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

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

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

    回复于

相关问题