解决方法
在元素上使用CSS pointer-events属性可禁用用户与其及其后代的交互.
div.disabled { pointer-events: none; }
您还可以使用user-select属性进一步限制文本选择的用户交互.
div.disabled { user-select: none; }
但是,这些CSS属性不会禁用键盘交互,这种交互可能通过标记到后代来实现.
根据这个参考 – https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees;有一个惰性属性的提议,但它尚未由浏览器实现.
因此,截至目前,您将使用Javascript来禁用键盘交互.只需使用capture连接keydown事件,并将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(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>