如何disabled禁用所有表单input输入框元素

转载地址：

一、pointer工作优点-events:none和覆盖层方法的问题

经常会遇到需求，需要禁用div中或者form元素中一堆表单控件元素，如<input>，<lect>，<textarea>元素。

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

设置pointer-events:none，该声明不了解可参见“css3 pointer-events:none应用举例及扩展”这篇文章。例如：

for孝心无价 毕淑敏m {  pointer-events: none;}

使用::before伪元素创建一个浮层该在所有的表单元素上，例如：

form {  position: relative;}form::before {  content: '';  position: absolute;  left: 0; right: 0; top: 0; bottom: 0;  background-color: rgba(0,0,0,.001);}

以上两个方向虽然可以让点击无效，感动中国人物事迹但是并没有阻止键盘访问，也就是tab键索引，或者回车都能触发表单行为，使用new formdata(form)也能获取表单控件值，并不是真正意义上禁用，问题很大。

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

有！

二、fieldt元素轻松实现

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

<form>    <fieldt disabled>        <legend>表单标题</legend>        <...>    </fieldt></form>

回家吧，结束了！

let’s go home! it’s over!

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

firefox浏览器下：

edge浏览器下：

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

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

可以再辅助下面的css：

fieldt[disabled] {   -ms-pointer-events: none;   pointer-events: none;}

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

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

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

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

您可以狠狠地点击这里：

四、结束语

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

我手上目小组名称和口号前还有其他活，预计清明节后陆续更新，稍安……

最后，关于fieldt元素，推荐阅读我之前写的这篇文章：“fieldt,legend元素及css布局应用”，相信会有所收获的。

好的，就说这么多！

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