Элемент списка не получает фокус, хотя я использую фокус () - PullRequest
Новая
       0

Элемент списка не получает фокус, хотя я использую фокус ()

0 голосов
/ 28 мая 2018

Мне нужно отобразить список и сфокусировать первый элемент списка в списке, когда пользователь нажимает клавишу «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);

Несмотря на получение спискаотображается, когда пользователь нажимает «m», элемент списка не фокусируется.

ниже находится ссылка jsfiddle

https://jsfiddle.net/t75gojd7/

Может кто-нибудь помочь мне с фокусировкой спискаэлемент.

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

Здесь происходит то, что элемент, который вы пытаетесь сфокусировать, это div, который фактически не остается в фокусе после щелчка, в отличие от текстового поля button или input.

Вы можете наблюдать это поведение, нажав указатель на div и не отпуская его.Ваши CSS-стили будут применены.

Я бы посоветовал вместо этого на :focus CSS-классе использовать другой псевдо-CSS-класс.ИЛИ вы можете сделать event.preventDefault() при div щелчке.

Цитирование из MDN

Если вы вызываете HTMLElement.focus () из обработчика событий mousedownВы должны вызвать event.preventDefault (), чтобы фокус не покинул HTMLElement.

Также проверьте этот ответ Можно ли сфокусироваться на

, которая предлагает добавить атрибут tabindex.

0 голосов
/ 28 мая 2018

Похоже, что добавление tabindex может работать.Добавьте это к атрибутам. 

lItem.setAttribute('tabindex', index);

Получил идею от здесь .У некоторых людей работали не все.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...