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

Is it possible to focus on a <div> using JavaScript focus() function?

提问by OM The Eternity

Is it possible to focus on a <div>using JavaScript focus()function?

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

I have a <div>tag

我有一个<div>标签

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

I am trying to focus on the above <div>using :

我正在尝试<div>使用以下方法专注于上述内容：

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

But it doesn't work. Could someone suggest something....?

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

采纳答案by Casey Chu

window.location.hash = '#tries';

This will scroll to the element in question, essentially "focus"ing it.

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

回答by Fenton

Yes - this is possible. In order to do it, you need to assign a tabindex...

是的 - 这是可能的。为了做到这一点，您需要分配一个tabindex ...

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

A tabindex of 0 will put the tag "in the natural tab order of the page". A higher number will give it a specific order of priority, where 1 will be the first, 2 second and so on.

tabindex 为 0 会将标签置于“页面的自然 Tab 键顺序”。更高的数字会给它一个特定的优先级顺序，其中 1 将是第一个，2 秒，依此类推。

You can also give a tabindex of -1, which will make the div only focus-able by script, not the user.

您还可以提供 -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>

Obviously, it is a shame to have an element you can focus by script that you can't focus by other input method (especially if a user is keyboard only or similarly constrained). There are also a whole bunch of standard elements that arefocusable by default and have semantic information baked in to assist users. Use this knowledge wisely.

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

回答by vinoths

document.getElementById('tries').scrollIntoView()works. This works better than window.location.hashwhen you have fixed positioning.

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

回答by Sarath Ak

You can use tabindex

您可以使用 tabindex

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

The tabindex value can allow for some interesting behaviour.

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

• If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
• If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. Values greater than 0 create a priority level with 1 being the most important.

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

回答by Azad

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

回答by Juan Mendes

I wanted to suggest something like Michael Shimmin's but without hardcoding things like the element, or the CSS that is applied to it.

我想推荐一些类似 Michael Shimmin 的东西，但没有对元素或应用于它的 CSS 之类的东西进行硬编码。

I'm only using jQuery for add/remove class, if you don't want to use jquery, you just need a replacement for add/removeClass

我只使用 jQuery 添加/删除类，如果你不想使用 jquery，你只需要替换添加/删除类

--Javascript

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

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

--CSS

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

回答by Michael Shimmins

To make the border flash you can do this:

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

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

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

This will make the border solid red for 1 second then remove it again.

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

回答by san jing

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>