Make an HTML Element Non-Focusable

Make an HTML element non-focusable

<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

how to make a DIV unfocusable?

The <div> should not be capable of receiving focus unless you have added tabIndex.

If you have added tabIndex, you should remove it by

document.getElementById("yourElement").removeAttribute("tabIndex");

How to disable focus on specific html elements?

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>

Make select element truly unfocusable

EDIT: This method stopped working in Firefox 52 or some earlier version

I have found a dirty solution on my own. If I ignore the fact that the select element still fires focus and blur events I could make it look like the div element becomes focused by performing select.blur() and div.focus() when the select element gets focused. See the code below.

Notice: If you are going to use my solution please don't forget to implement accessibility features manually since they won't work anymore as @nnnnnn pointed out.

function addEv(id, event, message){ document.getElementById(id).addEventListener(event, function(){    document.getElementById('console').innerHTML += message+"<br>";  });}addEv('select', 'focus', 'select focus');addEv('select', 'blur', 'select blur');
addEv('span', 'focus', 'span focus');addEv('span', 'blur', 'span blur');
addEv('select-wrapper', 'focus', 'div focus');addEv('select-wrapper', 'blur', 'div blur');
document.getElementById('select').addEventListener('focus', function(){ document.getElementById('select').blur();  document.getElementById('select-wrapper').focus();});

#select-wrapper {  display: inline-block;  padding: 1px;  border: 1px solid transparent;}#select-wrapper:focus {  border: 1px solid;  border-radius: 5px;  outline: none;}

<input type="text" value="3 glasses"><div id="select-wrapper" tabindex="0">  <span id="span">of</span>  <select id="select" tabindex="-1">    <option value="beer">Beer</option>    <option value="wine" selected>Wine</option>    <option value="vodka">Vodka</option>  </select></div><input type="button" value="drink"><div id="console"></div><br>

Is there a way to disable focus on div and its child nodes?

Firstly, there's a distinction between "not-focusable by tab key" and "never-focusable (programmatically, by click, or by tab)". The former is achieved with setting the tabindex="-1" attribute, the latter by adding a disabled attribute.

input {display:block}

<input><input>disabled: <input disabled>tab -1: <input tabindex="-1"><input><input>

Which HTML elements can receive focus?

There isn't a definite list, it's up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus() method are
HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. This notably omits HTMLButtonElement and HTMLAreaElement.

Today's browsers define focus() on HTMLElement, but an element won't actually take focus unless it's one of:

• HTMLAnchorElement/HTMLAreaElement with an href
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with disabled (IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons
• HTMLIFrameElement (though focusing it doesn't do anything useful). Other embedding elements also, maybe, I haven't tested them all.
• Any element with a tabindex

There are likely to be other subtle exceptions and additions to this behaviour depending on browser.

how can google.com put a tab focus on an element that is not focusable

When you press Enter on that message, JavaScript code adds tabindex="-1" to the element and focuses it. Before Enter:

After:

When focus leaves the element (presumably a blur event handler), JavaScript code removes the tabindex from the element.

You can see this if you right-click the element and reveal it in the Elements panel, then watch the element as you tab until you see that element again. For instance, if you click anywhere near the top of the body of the page after opening the Elements panel and Shift+Tab, eventually you get that same "Show main content" box again, and when you press Enter you can see the tabindex get added (and then see it get removed when you move away).

---

Related Topics