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?

possible duplicate of [How to make an HTML element non-focusable?](http://stackoverflow.com/questions/9152096/how-to-make-an-html-element-non-focusable) — thSoft, Jan 21 '14 at 10:10

score 29 · Accepted Answer · edited Jun 19 '13 at 09:27

29

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

edited Jun 19 '13 at 09:27

Robin Maben

22,194
16
64
99

answered Apr 04 '09 at 01:40

Mister Lucky

4,053
2
20
18

3

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.) – Vaccano May 06 '16 at 16:13
2

Note that divs with `contenteditable="true"` can also receive focus. – thdoan Nov 25 '16 at 07:15

score 25 · Answer 2 · answered Feb 02 '12 at 10:03

25

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

answered Feb 02 '12 at 10:03

Robin Maben

22,194
16
64
99

2

This will not make the element unfocusable though, it will just make it unreachable with keyboard navigation. Clicking the element would still focus it. – blid May 20 '20 at 11:34

score 4 · Answer 3 · edited May 15 '23 at 07:17

4

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

edited May 15 '23 at 07:17

nwp

9,623
5
38
68

answered Apr 04 '09 at 01:17

Steve Harrison

121,227
16
87
72

2

To blur it, it means the focus is already on it, right? How to disable focus to be set on it? – Morgan Cheng Apr 04 '09 at 01:22
I'm not sure whether it is possible to make an element 'un-focusable'. Sorry for not reading your question carefully! – Steve Harrison Apr 04 '09 at 01:33

Sheo Dayal Singh · Answer 4 · 2017-09-20T10:09:24.343

0

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

edited Sep 20 '17 at 10:09

answered Sep 20 '17 at 09:49

Sheo Dayal Singh

1,591
19
11

score 0 · Answer 5 · answered Mar 09 '22 at 20:31

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...

score -3 · Answer 6 · edited Nov 19 '19 at 17:54

-3

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

edited Nov 19 '19 at 17:54

whoami - fakeFaceTrueSoul

17,086
6
32
46

answered Nov 19 '19 at 17:09

nitin kujur

27
1

That makes it unclickable, which is different than unfocusable. – Slbox Oct 24 '20 at 00:49
downvoting, because as @Slbox said, pointer-events involve the cursor and it will still be interacted with the keyboard – Caleb Taylor Dec 08 '20 at 19:46

how to make a DIV unfocusable?

6 Answers6

Linked