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

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

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

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浏览器下的效果:

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

Firefox浏览器下:

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

Edge浏览器下:

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

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

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

可以再辅助下面的CSS:

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

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

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

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

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

结语

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

未经允许不得转载:码云笔记 » 使用disabled属性如何禁用所有表单的input输入框呢
喜欢(2) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏