DIV with tabindex: capture key event but skip on tab

Question

I need a <div> that should be able to get key down events. For that reason I have to add the attribute tabindex="0", as suggested here.

The "collateral effect" is that the <div> become "tabbable" and this is not desired because tab should just traverse input fields.

Is there a "trick" to avoid it or the only way is to catch the tab event, search for the next input field (so skipping DIVs) and than prevent the default behavior?

Why you want div to have key down events and don't want to have focus on that element. You want to get keydown events when click it? — jcubic, Sep 04 '19 at 11:40
Yes I want keydown events but I don't want the element to be traversable with tab — Neo, Sep 04 '19 at 12:24
what about setting tabindex="-1"? Seems to work in FF an Chrome — Neo, Sep 10 '19 at 12:03

Fredrik Stigsson · Answer 1 · 2019-09-10T12:09:33.087

1

You can test with this.

function doSomething(ctrl)
{
    // Prevent default behaviour
    event.preventDefault();
    
    if (event.key === 'Enter')
    {
        ctrl.innerHTML = 'Enter is pressed';
    }
    else if (event.key === 'ArrowDown')
    {
        ctrl.innerHTML = 'ArrowDown is pressed';
    }
}

<div onkeydown="doSomething(this);" contenteditable="true" readonly style="outline:none;">flsdkjflsajdflkasjdlfkjsaldfkjlksadfj</div>

edited Sep 10 '19 at 12:09

answered Sep 04 '19 at 08:09

Fredrik Stigsson

383
1
9

I have tested it, but it only works if contenteditable="true", which is not my case! – Neo Sep 10 '19 at 12:02
Ok, the **readonly** attribute prevents edits and you can style the div with no outline. See my updated answer. – Fredrik Stigsson Sep 10 '19 at 12:10

score 0 · Answer 2 · answered Sep 16 '19 at 04:55

0

What about setting tabindex="-1"? Seems to work in FF an Chrome

answered Sep 16 '19 at 04:55

Neo

1,337
4
21
50

DIV with tabindex: capture key event but skip on tab

2 Answers2