In HTML, can I disable user interaction with the entire DOM tree?

Question

In HTML, can I disable user interaction with the entire DOM subtree using CSS?

Answer 1

Use the CSS property pointer-eventsfor an element to disable user interaction with it and its descendants.

div.disabled { pointer-events: none; }

You can also use the property user-selectto further limit the interaction of text with text.

div.disabled { user-select: none; }

Note that the property user-selectmay require vendor prefixes.

---

However, these CSS properties will not disable keyboard interaction, which can occur by tabbing in descendants.

- https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees; inert, .

, Javascript . keydown capture returnValue false. Tab , .

var noInteracts = document.getElementsByClassName('disabled');
[].map.call(noInteracts, function(elem) {
    elem.addEventListener("keydown", function(e) {
        if (e.keyCode != 9) {       // allow tab key to escape out
            e.returnValue = false;
            return false;
        }
    }, true);
});

CSS:

div.disabled *:focus { outline: 0; }

.

-: http://jsfiddle.net/abhitalks/hpowhh5c/5/

var noInteracts = document.getElementsByClassName('disabled');
[].map.call(noInteracts, function(elem) {
    elem.addEventListener("keydown", function(e) {
        if (e.keyCode != 9) {
            e.returnValue = false;
            return false;
        }
    }, true);
});

div.disabled { 
    pointer-events: none; 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; 
  user-select: none;
}
div.disabled *:focus { outline: 0; }

<p>This is normal</p>
<form>
    <label>Input 1: <input id="i1" /> </label>
    <button>Submit</button>
</form>
<hr />
<div class="disabled">
    <p>User interaction is disbled here</p>
    <form>
        <label>Input 2: <input id="i2" /> </label>
        <button>Submit</button>
    </form>
    <p>Lorem ipsum</p>
</div>

Hide result