How to disable focus on specific html elements?

Question

I have custom input component in vue js, and in this component i have input and two buttons.when input loose focus, i want to focus on next input, but now it focus on those buttons. finally i should press tab key three times to focus on next input.

Is there any html attribute for disabling focus on some elements? or there is a javascript way?

Does this answer your question? [Which HTML elements can receive focus?](https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus) — Dima Tisnek, Mar 02 '20 at 10:11
Add tabIndex either static or programmatically https://stackoverflow.com/questions/3772438/can-i-dynamically-set-tabindex-in-javascript — Rajat Jaiswal, Mar 02 '20 at 11:04

score 12 · Accepted Answer · answered Mar 02 '20 at 08:25

12

The tabindex attribute controls tabbing. Set it to -1 and the tab key will not stop on that element.

<button tabindex="-1">click me</button>

answered Mar 02 '20 at 08:25

oshell

8,923
1
29
47

can you provide a link to where I can find this in vuejs docs? – Samha' May 13 '20 at 13:59
1

it is not related to vue specifically but a general web standard – oshell May 13 '20 at 17:25

score 1 · Answer 2 · answered Mar 02 '20 at 08:26

You could use the blur event which is an equivalent of https://www.w3schools.com/jsref/event_onfocusout.asp <input v-on:blur="handleBlur">

To trigger something when you lose focus.

You also could create a tabindex tabindex="0" on elements to determine the order of tabbing.

Unfortunately you can't make an element non focus-able unless you want to disable the whole element. Because then you couldn't type anything into that input.

How to disable focus on specific html elements?

2 Answers2