使用disabled属性如何禁用所有表单的input输入框呢

在实际开发中大家会经常遇到这些需求，需要禁用 div 中或者 form 元素中一堆表单控件元素，如<input>，<select>，<textarea>元素。相信很多人会用到这两种方法，一种是 pointer-events:none，另一种是覆盖层方法，但是这两种方法也有着他们各自存在的一些问题，一起往下看。

1. 设置 pointer-events:none

form {
  pointer-events: none;
}

2. 使用::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)也能获取表单控件值，并不是真正意义上禁用，问题很大。

那么有没有简单轻松的方法去禁用所有的表单元素呢？

有

fieldset 元素轻松实现

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

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

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

Firefox 浏览器下：

Edge 浏览器下：

IE 浏览器的瑕疵和解决方法

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

可以再辅助下面的 CSS：

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

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

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

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

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

结语

以上就是今天为大家带来的使用 disabled 属性禁用所有表单的 input 输入框方法，相信读过后对你有帮助，也希望大家留言多多交流，留下你更好的方法。

以上关于使用disabled属性如何禁用所有表单的input输入框呢的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。