Is there a quick way to remove tab focus from all elements of a class or a type?

Question

Lets say i have 2 buttons,an input and a textarea,i know how to set tabindex="-1" to prevent tabbing for each one of them separately.

Is there a quick way to prevent all buttons in my body from having tab focus,or all the elements of a class(for example all elements of class "foo")?

Im open to js suggestions as well.

<html>
<body>
<button>BUTTON 1</button><button class="foo">BUTTON 2</button>
<input class="foo">
<textarea></textarea>
</body>
</html>

Some people faced a [similar problem](https://stackoverflow.com/questions/3682812/disabling-tab-focus-on-form-elements) You could modify the jquery solution to iterate over all elements you want to disable tabbing. — Lars, Jan 10 '21 at 00:03

score 2 · Answer 1 · answered Jan 10 '21 at 00:02

How about setting tabindex="-1" programmatically?

var unfocusableElems = document.querySelectorAll('button, input, textarea, .foo');
unfocusableElems.forEach(function (el) { el.setAttribute('tabindex', '-1'); });

<html>
<body>
<button>BUTTON 1</button><button class="foo">BUTTON 2</button>
<input class="foo">
<textarea></textarea>
</body>
</html>

Is there a quick way to remove tab focus from all elements of a class or a type?

1 Answers1