即使我使用focus（），列表项也没有获得焦点

Question

I need to display the list and focus first list item in the list when user selects key 'm' on the keyboard. 当用户在键盘上选择键“ m”时，我需要显示列表并在列表中聚焦第一个列表项。 I tried calling focus() on the list item but it is not getting focus or it is not showing any effect. 我尝试在列表项上调用focus（），但是它没有获得焦点或没有显示任何效果。 Below is the code. 下面是代码。

HTML: 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: 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);

Even though list is getting displayed when user presses 'm', list item is not getting focused. 即使当用户按下'm'时显示了列表，列表项也没有得到关注。

below is the jsfiddle link 下面是jsfiddle链接

https://jsfiddle.net/t75gojd7/ https://jsfiddle.net/t75gojd7/

Can anyone please help me to focus the list element. 谁能帮我把重点放在列表元素上。

Answer 1

It looks like adding a tabindex might work. 似乎添加一个tabindex可能有效。 Add this to the attributes. 将此添加到属性。

lItem.setAttribute('tabindex', index);

Got the idea from here . 从这里得到了这个主意。 Worked for some people not all. 为某些人服务，而不是全部。

Answer 2

What is happening here is that the element you are trying to focus is a div which doesn't actually remain in focus after click unlike a button or a input text field. 这里发生的是您要聚焦的元素是一个div ，它与单击button或input文本字段不同，实际上在单击后并没有保持焦点。

You can observe this behavior by pressing down the pointer on the div and not releasing it. 您可以通过按下div上的指针而不释放它来观察这种行为。 Your CSS stylings will be applied. 您的CSS样式将被应用。

I would suggest instead on :focus CSS class, you use some other pseudo CSS class. 我建议在:focus CSS类上使用其他伪CSS类。 OR you can do event.preventDefault() on div click. 或者，您可以在div点击时执行event.preventDefault() 。

Quoting from MDN 从MDN报价

If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement. 如果从mousedown事件处理程序中调用HTMLElement.focus（），则必须调用event.preventDefault（）来防止焦点离开HTMLElement。

Also check out this ans Is it possible to focus on a <div> using JavaScript focus() function? 还请检查这个问题。是否可以使用JavaScript focus（）函数将焦点放在<div>上？ which suggests adding tabindex attribute. 建议添加tabindex属性。

即使我使用focus（），列表项也没有获得焦点

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-05-28 19:05:26

解决方案2
1 2018-05-28 19:05:44

即使我使用focus（），列表项也没有获得焦点

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-05-28 19:05:26

解决方案2 1 2018-05-28 19:05:44

解决方案1
2 已采纳 2018-05-28 19:05:26

解决方案2
1 2018-05-28 19:05:44