很多人用的下面这两种方法实现：

1. 设置pointer-events:none该声明不了解可参见“”这篇文章。例如：
2. 使用::before伪元素创建一个浮层该在所有的表单元素上例如：

以上两个方向虽然可以让点擊无效，但是并没有阻止键盘访问也就是Tab键索引，或者回车都能触发表单行为使用new FormData(form)也能获取表单控件值，并不是真正意义上禁用问題很大。

那有没有什么简单方法轻松禁用所有表单元素呢难道真要遍历所有的控件元素再设置[disabled]属性吗？

其实要真正意义上禁用所有的表单元素很简单，嵌套在<fieldset>元素中然后设置<fieldset>元素disabled就可以了，代码示意如下：

下图是Chrome浏览器下的效果：

三、IE浏览器的瑕疵和解决

然后IE浏览器（包括Edge）下有个瑕疵，那就是UI样式上虽然禁用了键盘也无法响应，但是输入框内容居然可以输入，而且表单的提交行为居然也可以點击触发有些不完美，怎么办呢

可以再辅助下面的CSS：

IE10+浏览器都可以完美禁用。

有人要问如果我要兼容IE8IE9浏览器怎么办？

那使用伪元素創建一个浮层覆盖在所有表单元素上面就是一开始提到的覆盖方法，具体代码不重复展示

于是，双管齐下表单所有元素禁用就这样唍美搞定了。

您可以狠狠地点击这里：

第五届CSS大会上的演讲内容将会分系列和一个汇总依次介绍等不及的小伙伴可以。

我手上目前还有其他活预计清明节后陆续更新，稍安……

最后关于fieldset元素，推荐阅读我之前写的这篇文章：“”相信会有所收获的。

感谢阅读欢迎茭流，也欢迎朋友圈分享

发布了0 篇原创文章 · 获赞 10 · 访问量 4万+