当用户选择键“m”时,我需要显示列表并将列表中的第一个列表项集中在列表中。在键盘上。我尝试在列表项上调用focus()但它没有获得焦点或者没有显示任何效果。以下是代码。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='js/index.js'>
</script>
<style>
html, body {
height:100%
}
#mid {
display: flex;
height: 100%;
width: 100%;
justify-content: stretch;
flex-flow: row nowrap;
z-index: 2;
}
#mid.hidden {
display: none;
}
#mid1, #mid2 {
display: flex;
flex: 1;
align-items: center;
}
#mid1 {
justify-content: center;
background-color: rgba(255, 255, 255, 0.5);
}
#mid2 {
background-color: rgba(255, 255, 255, 0.6);
}
#ulid {
list-style-type: none;
width: 100%;
margin: 0;
border: 0;
padding: 0;
}
.list-item {
width: 100%;
height: 150px;
border-style: solid;
border-width: 1px;
display:flex;
align-items: center;
justify-content: flex-start;
}
li:focus, li:active {
background-color: green;
}
</style>
</head>
<body>
<video id='vid' src='textMotion.mp4' autoplay loop></video>
<div id='mid' class='hidden'>
<div id='mid1'>
<h1>TEXT</h1>
</div>
<div id='mid2'>
<ul id='ulid'></ul>
</div>
</div>
</body>
</html>
JavaScript的:
function displayMenu() {
var mid = document.getElementById('mid');
if(mid.classList.contains('hidden') == false) {
mid.classList.toggle("hidden");
let ulid = document.getElementById('ulid');
while(ulid.firstChild) {
ulid.removeChild(ulid.firstChild);
}
return;
}
var ulid = document.getElementById('ulid');
for(let index = 0; index < 3; index ++) {
let lItem = document.createElement('li');
lItem.classList.add('list-item');
lItem.setAttribute('id', 'li' + index);
var lineBreak = document.createElement('br');
lItem.appendChild(document.createTextNode('TEXT'));
lItem.appendChild(lineBreak);
lItem.appendChild(document.createTextNode('TEXT'));
ulid.appendChild(lItem);
}
mid.classList.toggle("hidden");
document.getElementById('li0').focus();
}
function changeChannel(e) {
console.log('received keyEvent : ' + e.keyCode);
let keyCode = e.keyCode;
if(keyCode == 77) {
displayMenu();
}
}
document.addEventListener('keydown', changeChannel);
即使列表在用户按下&#39; m时显示,列表项也没有聚焦。
下面是jsfiddle链接
https://jsfiddle.net/t75gojd7/
任何人都可以帮我集中列表元素。
答案 0 :(得分:2)
答案 1 :(得分:1)
这里发生的事情是,您要关注的元素是div
,与button
或input
文本字段不同,点击后实际上不会保持对焦。
您可以通过按下div
上的指针而不释放它来观察此行为。您的CSS样式将被应用。
我建议改为:focus
CSS类,你使用其他一些伪CSS类。或者您可以event.preventDefault()
点击div
进行操作。
引自MDN
如果从mousedown事件处理程序调用HTMLElement.focus(),则必须调用event.preventDefault()以防止焦点离开HTMLElement。
另请查看此Is it possible to focus on a <div> using JavaScript focus() function?,其中建议添加tabindex
属性。