如何禁用对特定 html 元素的关注？

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?

Answer 1

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>

Answer 2

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.