最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

使用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输入框方法,相信读过后对你有帮助,也希望大家留言多多交流,留下你更好的方法。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 使用disabled属性如何禁用所有表单的input输入框呢

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发