是否有可能集中在一个<div>使用JavaScript的焦点()函数?

我有一个<div>标签

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

我试图集中在上面的<div>使用:

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

但这并不奏效。谁能给点建议....?


当前回答

. getelementbyid(试).scrollIntoView()的工作原理。当你有固定的定位时,这比window.location.hash更好。

其他回答

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

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

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

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

我想建议一些类似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;
}

你可以使用tabindex

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

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

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

window.location.hash = '#tries';

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

. getelementbyid(试).scrollIntoView()的工作原理。当你有固定的定位时,这比window.location.hash更好。