屏蔽页面所有录入域
在前端开发的一些场景,需要屏蔽掉一个页面内所有的录入域或者一个组件内的所有录入域。
- 在项目刚建立的时候存在form的
在项目刚建立的时候,可以留出缝隙,做全局的控制,form表单的disabled属性等等。这种情况适合页面的录入域都是在form中的。比如原生写法。下边几种情况不太适用
- 没有form
- 手动拼接的模拟form
- 直接添加的几个input
- 控制其中的某几个或者一类元素
- 表单元素不固定。即使用动态加载的方式来添加的。表单中使用一个循环来动态渲染出表单元素。这样的话可以直接加在元素上disabled属性。比如vue 的element动态加载的。
- 比如像vant的,没有form属性,直接使用表单元素拼接的,还要兼容之后扩展时添加新的元素的,一个方法是添加遮罩层,一个透明的div盖住表单。
.disabled {
width: 100%;
background-color: #f7f8fa00;
height: 100%;
position: absolute;
z-index: 1;
}