Make an HTML element non-focusable

Question

Is it possible to make an HTML element non-focusable?

I understand that a list of elements that can receive focus can be defined and that a user can navigate through these elements by pressing a Tab key. I also see that it is up to the browser to control this.

But maybe there is a way to make certain elements non-focusable, say I want a user to skip a certain <a> tag when pressing a Tab.

possible duplicate of [how to make a DIV unfocusable?](http://stackoverflow.com/questions/716235/how-to-make-a-div-unfocusable) — thSoft, Jan 21 '14 at 10:09
The question is phrased wrong. It should read: "How to make an HTML element non-tabbable?" which is what the original poster wants. — ShortFuse, Oct 29 '18 at 18:35

score 131 · Accepted Answer · edited Jun 08 '20 at 12:27

131

<a href="http://foo.bar" tabindex="-1">unfocusable</a>

A negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.

See also: developer.mozilla.org

edited Jun 08 '20 at 12:27

Martin Thoma

108,021
142
552
849

answered Feb 05 '12 at 19:11

Fedor Skrynnikov

5,295
4
26
32

1

Bear in mind that it's invalid HTML to have a number below 0 as the value of `tabindex` (although I *think* it's valid in HTML5). – James Allardice Feb 05 '12 at 19:24
74

Note that an element with a negative tabindex is still *focusable*, it just cannot be reached using sequential focus navigation (i.e. tabbing). – Alohci Feb 05 '12 at 19:43
This does not work in IE for certain elements (eg. SVG nodes). See Zohid's answer below, for a solution. – Krisztián Balla Nov 06 '19 at 12:49
3

just a side note for React devs: don't forget the camelCase and the brackets: tabIndex={-1} – e18r Apr 28 '20 at 13:23
I downvoted this answer, since it is not what the question is exactly about. In my case it didn't help me. The element is being omitted while you using Tab, but still can be auto-focused. So to make it unfocusable anyway, we need to add `disabled` attribute, as it is mentioned in @Randy's answer. – Dzmitry Alifer Dec 29 '20 at 13:10

score 34 · Answer 2 · answered Apr 10 '17 at 14:34

34

To completely prevent focus, not just when using the tab button, set disabled as an attribute in your HTML element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<input class="form-control" type="text"> Click this, you can see it's focusable.

<input class="form-control" type="text" readonly>  Click this, you can see it's focusable.

<input class="form-control" type="text" readonly tabindex="-1">  Click this, you can see it's focusable. Not tab'able.

<input class="form-control" type="text" disabled>  Click this, you can see it's <strong>not</strong> focusable.

answered Apr 10 '17 at 14:34

Randy

8,946
5
38
55

6

This is not what the OP is looking to achieve. Your example would make that textbox disabled. A disabled textfield is not the same as an unfocusable one. He still wants to make his button clickable but wants his textfield to still have the focus while he's clicking his button. If an item is unfocusable then interacting with it by clicking, etc, will mean that the current focused item stays focused. That's that the OP wants to achieve. – Richard Aug 12 '18 at 07:45
1

@Richard I have given examples of making an element unfocusable. It is for the op to decide if he accepts the answer. What you describe is not possible in the HTML spec. Downvoting my answer hurts me, as the answer is not a bad answer and helped a lot of people if you look at the upvotes. I would prefer you downvoting answers that are simply wrong instead of my answer that showed the best possible solution. The answer the OP accepted is also wrong according to your description. Please Read the tour and consider again about the downvote. – Randy Aug 13 '18 at 11:21
2

This doesn't work for non-`input` elements -- if I don't want a `
` to be able to receive focus, `disabled` does not help.
– Coderer Mar 04 '20 at 10:00

ShortFuse · Answer 3 · 2018-07-04T16:27:57.110

In order to make an prevent an element from taking focus ("non-focusable"), you need to use Javascript to watch for the focus and prevent the default interaction.

In order to prevent an element from being tabbed to, use tabindex=-1 attribute.

Adding tabindex=-1 will make any element focusable, even div elements. This means when a user clicks on it, it would likely get a focus outline, depending on the browser..

You would ideally, want this:

function preventFocus(event) {
  event.preventDefault();
  if (event.relatedTarget) {
    // Revert focus back to previous blurring element
    event.relatedTarget.focus();
  } else {
    // No previous focus target, blur instead
    event.currentTarget.blur();
  }
}

/* ... */

element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);

score 5 · Answer 4 · answered Feb 05 '12 at 19:10

5

TabIndex is what your looking for: http://www.w3schools.com/jsref/prop_html_tabindex.asp.

When you set a tabIndex value to -1 you will skip it when tabbing through your form.

answered Feb 05 '12 at 19:10

rie819

1,239
12
19

Chinmoy · Answer 5 · 2012-02-05T19:51:51.227

3

For the element you do not want to be focused on tab, you have to put the tabindex as a negative value.

edited Feb 05 '12 at 19:51

answered Feb 05 '12 at 19:32

Chinmoy

1,744
2
20
44

score 2 · Answer 6 · edited Nov 06 '19 at 12:49

2

I used focusable="false", because tabindex="-1" was not working in IE.

edited Nov 06 '19 at 12:49

Krisztián Balla

17,664
13
63
76

answered Mar 29 '18 at 07:22

Zohid

368
1
2
12

2

This seems to be a non-standard attribute used by IE for svg elements: https://msdn.microsoft.com/en-us/ie/ff971943(v=vs.94) – Krisztián Balla Nov 06 '19 at 12:47

score 2 · Answer 7 · answered Nov 20 '21 at 08:00

In case you are looking for a global solution:

<a href="#" class="__nofocus" tabindex="-1">Link</a>

document.body.addEventListener('focusin', (e) => {
  if (e.target.classList.contains('__nofocus')) {
    e.relatedTarget ? e.relatedTarget.focus() : e.target.blur();
  }
});

It should work for anchors, buttons and anything else that can receive focus by default. Don't forget to set tabindex="-1" as well as the element would be unpassable by Tab-key navigation.

Alexander Abakumov · Answer 8 · 2021-08-04T19:12:47.113

Making a focusable-by-default HTML element a non-focusable one isn't possible without JavaScript.

After diving into focus-related DOM events, I've came up with the following implementation (based on the @ShortFuse's answer, but fixed some issues and edge cases):

// A focus event handler to prevent focusing an element it attached to
onFocus(event: FocusEvent): void {
    event.preventDefault();

    // Try to remove the focus from this element.
    // This is important to always perform, since just focusing the previously focused element won't work in Edge/FF, if that element is unable to actually get the focus back (became invisible, etc.): the focus would stay on the current element in such a case
    const currentTarget: any | null = event.currentTarget;
    if (currentTarget !== null && isFunction(currentTarget.blur))
        currentTarget.blur();

    // Try to set focus back to the previous element
    const relatedTarget: any | null = event.relatedTarget;
    if (relatedTarget !== null && isFunction(relatedTarget.focus))
        relatedTarget.focus();
}

// Not the best implementation, but works for the majority of the real-world cases
export function isFunction(value: any): value is Function {
    return value instanceof Function;
}

This is implemented in TypeScript, but could be easily adjusted for plain JavaScript.

Make an HTML element non-focusable

8 Answers8

Linked

Related