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();

但以上都沒有

有任何想法嗎？

Answer 1

問題是如果不設置tabIndex，則無法聚焦非輸入元素。

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

你可以嘗試這個小提琴： jsfiddle

Answer 2

'li'不能有焦點，但是'輸入'可以，所以你自己編寫以下腳本：

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）。