带有 tabindex 的 DIV：捕获关键事件但跳过选项卡

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?

Answer 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>

Answer 2

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