如何disabled禁用所有表单input输入框元素
转载地址:https://www.zhangxinxu.com/wordpress/?p=8568
一、pointer-events:none和覆盖层方法的问题
经常会遇到需求,需要禁用div
中或者form
元素中一堆表单控件元素,如<input>
,<select>
,<textarea>
元素。
很多人用的下面这两种方法实现:
- 设置
pointer-events:none
,该声明不了解可参见“CSS3 pointer-events:none应用举例及扩展”这篇文章。例如:form {
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]
属性吗?
有!
二、fieldset元素轻松实现
其实,要真正意义上禁用所有的表单元素很简单,嵌套在<fieldset>
元素中,然后设置<fieldset>
元素disabled
就可以了,代码示意如下:
<form>
<fieldset disabled>
<legend>表单标题</legend>
<...>
</fieldset>
</form>
回家吧,结束了!
Let’s go home! It’s over!
下图是Chrome浏览器下的效果:
Firefox浏览器下:
Edge浏览器下:
三、IE浏览器的瑕疵和解决
然后,IE浏览器(包括Edge)下有个瑕疵,那就是UI样式上虽然禁用了,键盘也无法响应,但是,输入框内容居然可以输入,而且表单的提交行为居然也可以点击触发,有些不完美,怎么办呢?
可以再辅助下面的CSS:
fieldset[disabled] {
-ms-pointer-events: none;
pointer-events: none;
}
IE10+浏览器都可以完美禁用。
有人要问如果我要兼容IE8,IE9浏览器怎么办?
那使用伪元素创建一个浮层覆盖在所有表单元素上面,就是一开始提到的覆盖方法,具体代码不重复展示。
于是,双管齐下,表单所有元素禁用就这样完美搞定了。
您可以狠狠地点击这里:一次性禁用所有的表单元素demo
四、结束语
第五届CSS大会上的演讲内容将会分系列和一个汇总依次介绍,等不及的小伙伴可以访问这里我的分享视频。
我手上目前还有其他活,预计清明节后陆续更新,稍安……
最后,关于fieldset
元素,推荐阅读我之前写的这篇文章:“fieldset,legend元素及CSS布局应用”,相信会有所收获的。
好的,就说这么多!
感谢阅读,欢迎交流,也欢迎朋友圈分享。
如何disabled禁用所有表单input输入框元素的更多相关文章
- 清除表单input输入框内数据
清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...
- layui form表单 input输入框获取焦点后 阻止Enter回车自动提交
最简单的解决办法,不影响其他操作,给提交按钮增加 type="button" 属性 完美解决 <button type="button" class=&q ...
- 不让input表单的输入框保存用户输入的历史记录
如何不让input表单的输入框保存用户输入的历史记录. 有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...
- angular2+ form 表单中 input输入框的disabled属性设置无效
最近项目中遇到一个表单input设置disabled问题,直接赋值angular原生的[disabled]=“isDisabled”无效,浏览器警告信息: 无奈,只能按照控制台提示修改: 问题解决
- js jquery, jquery-ui 获取form各种表单input的值?
如何获取? make up (for): 弥补, 补偿, her beaty cannot make up for her stu'pidity. five Basic laws of human s ...
- HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中
HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改 有时候,我们希望 ...
- 实现表单input文本框不可编辑的三种方法
感谢原文作者:青灯夜游 原文链接:https://www.php.cn/div-tutorial-413133.html 目录 问题 实现方式 1.οnfοcus=this.blur() 2.read ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- ionic-CSS:ionic 表单和输入框
ylbtech-ionic-CSS:ionic 表单和输入框 1.返回顶部 1. ionic 表单和输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本 ...
随机推荐
- Java8——Optional
/* * 一.Optional 容器类:用于尽量避免空指针异常 * Optional.of(T t) : 创建一个 Optional 实例 * Optional.empty() : 创建一个空的 Op ...
- LeetCode 53. Maximum Subarray最大子序和 (C++)
题目: Given an integer array nums, find the contiguous subarray (containing at least one number) which ...
- 批处理命令 call
call 命令 CALL命令可以在批处理执行过程中调用另一个批处理,当另一个批处理执行完后,再继续执行原来的批处理 CALL command 调用一条批处理命令,和直接执行命令效果一样,特殊情况下很有 ...
- biopython处理中蜂基因组
1.安装包 pip install bcbio-gff pprint 2.显示中蜂的序列 from Bio import SeqIO genome_name = 'GCF_001442555.1_AC ...
- [RN] windows7 安装 Realm Studio 后,打开报错 A JavaScript error occurred in the main process
windows7 安装 Realm Studio 后,打开报错 报错如下: A JavaScript error occurred in the main process Uncaught Exce ...
- [LeetCode] 153. Find Minimum in Rotated Sorted Array 寻找旋转有序数组的最小值
Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...
- [LeetCode] 28. Implement strStr() 实现strStr()函数
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...
- leetcode 354. 俄罗斯套娃信封问题(二维排序有关)
题目描述 给定一些标记了宽度和高度的信封,宽度和高度以整数对形式 (w, h) 出现.当另一个信封的宽度和高度都比这个信封大的时候,这个信封就可以放进另一个信封里,如同俄罗斯套娃一样. 请计算最多能有 ...
- x58平台 服务器电源配置 tdp
我的机器配置: 处理器: Intel(R) Xeon(R) CPU X5660 @ 2.80GHz *2主板: TYAN Tyan Tank GT20-B7002LN ...
- 第27课 “共享状态”及其管理者(std::future/std::shared_future)
一. “共享状态” (一)“共享状态”对象 1. 用于保存线程函数及其参数.返回值以及新线程状态等信息.该对象通常创建在堆上,由std::async.std::promise和std::package ...