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

2020/10/11 17:21 · javascript ·  · 0评论

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

我有一个<div>标签

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

我正在尝试着重于上述<div>使用:

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

但这是行不通的。有人可以建议....?

window.location.hash = '#tries';

这将滚动到所讨论的元素,实质上是“聚焦”它。

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

显然,拥有可以通过脚本聚焦的元素而不能通过其他输入法聚焦的元素(特别是如果用户仅使用键盘或受到类似限制)尤其可耻。默认情况下,还有一大堆标准元素可聚焦的,并且包含了语义信息以帮助用户。明智地使用此知识。

document.getElementById('tries').scrollIntoView()作品。这比window.location.hash 固定位置时效果更好

您可以使用tabindex

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

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

  • 如果给定的值为“ -1”,则不能将其制表,而可以通过编程方式(使用element.focus())将焦点赋予该元素。
  • 如果给定值为0,则该元素可以通过键盘进行聚焦,并落入文档的制表流程中。大于0的值会创建优先级,其中1是最重要的。
<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

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

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

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

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

这将使边框变成红色并持续1秒钟,然后再次将其删除。

本文地址:http://javascript.askforanswer.com/shifoukeyishiyongjavascript-focushanshuzhuanzhuyu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!