JavaScript无法将焦点设置到ul中的第一个li元素

Question

我有以下代码：

<ul id='someId'>
 <li class='someClass'>
 </li>
</ul>

我想根据某些条件将焦点设置在ul中的第一个li元素上。

我的第一次尝试如下所示：

var ul = document.getElementById('someId');           
var child = ul.childNodes[0];
child.focus();

我的第二次尝试是这样的:

var y = document.getElementsByClassName('someClass');
var aNode = y[0];
aNode.focus();

但是上述方法都没有起作用。

有什么其他的想法吗？

- Sushil

---

请问您能展示一下HTML代码吗？ - manzapanza

HTMLElement.focus() 方法会在指定元素上设置焦点，如果该元素可以获得焦点。它是否可聚焦？你如何知道它没有聚焦？ - Samir Das

我使用了 document.activeElement 来检查焦点后哪个元素是活动元素。 - Sushil

Answer 1

问题在于，如果不设置tabIndex，您无法将非输入元素设为焦点。

<li tabIndex="-1">...</li>

你可以尝试这个小工具：jsfiddle。

- Luca Colonnello

---

来自 Matt 的回复： "但是根据规范，tabindex=-1 表示不可聚焦。而且，即使你将其修正为 tabindex=0，某些浏览器中也没有视觉指示来显示此处的焦点位置，所以你需要对其进行样式设置。" （无足够声望发表评论） - Nisse Engström

Answer 2

一个 'li' 不能获得焦点，但是一个 'input' 可以，因此您可以编写以下脚本：

function installLI(obj){
       var ul = document.createElement('ul');
       obj.appendChild(ul);
       var li = document.createElement('li');
       var txt = document.createElement('input');
       li.appendChild(txt);
       ul.appendChild(li);
       txt.focus();
       li.removeChild(txt);
}

其中'obj'是您要将列表附加到的对象（如可编辑的div）。

- TheWizardOfTN