0

I need to display the list and focus first list item in the list when user selects key 'm' on the keyboard. I tried calling focus() on the list item but it is not getting focus or it is not showing any effect. Below is the code.

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

Even though list is getting displayed when user presses 'm', list item is not getting focused.

below is the jsfiddle link

https://jsfiddle.net/t75gojd7/

Can anyone please help me to focus the list element.

1
  • Not sure if you can. Here's an old link.
    – wazz
    May 28, 2018 at 19:02

2 Answers 2

3

It looks like adding a tabindex might work. Add this to the attributes.

lItem.setAttribute('tabindex', index);

Got the idea from here. Worked for some people not all.

1

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.

You can observe this behavior by pressing down the pointer on the div and not releasing it. Your CSS stylings will be applied.

I would suggest instead on :focus CSS class, you use some other pseudo CSS class. OR you can do event.preventDefault() on div click.

Quoting from MDN

If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement.


Also check out this ans Is it possible to focus on a <div> using JavaScript focus() function? which suggests adding tabindex attribute.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.