how to make a DIV unfocusable?

Question

I met a problem about HTML rendering.

In dir="rtl" document of IE7, when JavaScript tries to set focus to a DIV element(with oElement.focus() method), the rendering turns to mess. The context is very complicated, so I suppose the easiest fix is to make the DIV unfocusable?

Is there any way to make a DIV not be focused?

Yarrow

possible duplicate of How to make an HTML element non-focusable? – Cuccuckold

Answer 1

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");

Cepheus

I know this is super old, but my experience has shown that Firefox will allow a div to get focus even if it does not have a tabIndex. (Just added as an FYI for other googlers.) – Barney

Note that divs with contenteditable="true" can also receive focus. – Verily

Answer 2

Additionally, If you want to make a focussable element(form input elements etc.) as unfocussable. You can set :

tabIndex = "-1"

document.getElementById("yourElement").setAttribute("tabIndex", "-1");

Toneme

This will not make the element unfocusable though, it will just make it unreachable with keyboard navigation. Clicking the element would still focus it. – Fortress

Answer 3

I'm not sure if you can make an element 'un-focusable', but you can certainly un-focus it at a specific point in time using its blur method:

document.getElementById("myElement").blur();

EDIT:

I think you can make an element 'un-focusable' by defocusing it every time it is focused. You can accomplish this via:

document.getElementById("myElement").onfocus = function() {
    this.blur();
};

...or (using inline Javascript in your HTML):

<div onfocus="this.blur();"></div>

Steve

Dvorak

To blur it, it means the focus is already on it, right? How to disable focus to be set on it? – Yarrow

I'm not sure whether it is possible to make an element 'un-focusable'. Sorry for not reading your question carefully! – Dvorak

Answer 4

Below is the some way to make DIV unfocusable using jquery.

    //  Set the tabindex atribute to -1.
        1)$("divid").attr('tabindex','-1');
    //  Remove the tabindex atribute if exists.
        2) $("divid").removeAttr('tabindex');
   //   This is third way.
        3) $("divid").blur();

Brothel

Answer 5

CSS-only solution from one of my past projects

/* Prevents all mouse interactions */
.disabled-div {
  opacity: 0.5;
  pointer-events: none;
}

/* Prevents all other focus events */
.disabled-div:focus,
.disabled-div:focus-within {
  visibility: hidden;
}

<h1>CSS Only Disable with Prevent Focus</h1>

<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>

Flickers slightly when it receives focus. That is because when it receives focus, visibility is set to 'hidden' and focus is lost and visibility is set back to 'visible' again. This is actually good because the user now has some idea where focus is while going over disabled fields...

Blackberry

Answer 6

An easy fix could be done by adding CSS :

div_selector{
    pointer-events: none;
}

Or By adding same css via jQuery :

$(div_selector).css('pointer-events', 'none');

Alissaalistair

That makes it unclickable, which is different than unfocusable. – Jodeejodhpur

downvoting, because as @Jodeejodhpur said, pointer-events involve the cursor and it will still be interacted with the keyboard – Diplomatist