在HTML中,我能否通过CSS禁用整个DOM子树的用户交互?
使用CSS pointer-events
属性在元素上禁用用户与其自身和子孙元素的交互。
div.disabled { pointer-events: none; }
您还可以使用user-select
属性来进一步限制文本选择的用户交互。
div.disabled { user-select: none; }
请注意,user-select
属性可能需要供应商前缀。
但是,这些CSS属性不会禁用通过Tab键进入后代元素的键盘交互。根据此参考文献,提出了一个 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; }
下面是一个将所有上述技术结合在一起的演示。
演示fiddle: 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>
#mask {
position: fixed;
left: 0;
top: 0;
z-index: 10; /* some high z-index */
width: 100vw;
height: 100vh;
opacity: 0;
user-select: none; /* prevents double clicking from highlighting entire page */
}
<!DOCTYPE html>
<html>
<body>
<input type="text">
<button>button</button>
<a href="https://google.com">link</a>
<div id="mask"></div>
</body>
</html>