奇技淫巧：css实现整个表单只读 form readonly

impig33 发布于2019-08-29 13:28 / 3742人阅读

摘要：此处就不一一赘述。我说的方法只需要给表单加上一个类，就可以让表单只读。方法用给做个看不见的蒙版，遮住下面所有的元素，使之不响应任何事件方法用让所有事件穿透关于属性，可以看看这个介绍

一般的方法往往给表单的各个input、select等加上readonly，但是这个方法有很多缺点。此处就不一一赘述。

我说的方法只需要给表单加上一个类，就可以让表单只读。

方法1: 用:before给form做个看不见的蒙版，遮住下面所有的元素，使之不响应任何事件

.form-readonly{
    position: relative;
}
.form-readonly:before{
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

方法2: 用pointer-events:none, 让所有事件穿透form

.form-readonly{
    pointer-events:none;
}

关于pointer-events属性，可以看看这个介绍：https://segmentfault.com/a/11...

云服务器 GPU云服务器提交整个表单 form表单校验 form表单插件 form表单判断

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112626.html

奇技淫巧：css实现整个表单只读 form readonly

摘要：此处就不一一赘述。我说的方法只需要给表单加上一个类，就可以让表单只读。方法用给做个看不见的蒙版，遮住下面所有的元素，使之不响应任何事件方法用让所有事件穿透关于属性，可以看看这个介绍一般的方法往往给表单的各个input、select等加上readonly，但是这个方法有很多缺点。此处就不一一赘述。我说的方法只需要给表单加上一个类，就可以让表单只读。方法1: 用:before给fo...

时飞 2019-08-22 11:07 评论0 收藏0
表单中readonly的input等标签，禁止光标进入（focus）的几种方式

摘要：需求及问题描述在做移动端页面，需要在订单页面中显示表单数据，由于统一，所以就依旧采用的结构来写结构，只读数据的标签自然要加，以为这样就行了。测试中模拟移动端是看不出问题的。除此之外都表现完美，就我目前需求来看，也不需要什么事件。需求及问题描述在做移动端页面，需要在订单页面中显示表单数据，由于UI统一，所以就依旧采用form的结构来写结构，只读数据的标签自然要加readonly=re...

Lowky 2019-08-30 15:53 评论0 收藏0
HTMl基础

摘要：每个表格均有若干行由标签定义，每行被分割为若干单元格由标签定义。字母指表格数据，即数据单元格的内容。数据单元格可以包含文本图片列表段落表单水平线表格等等。表格最重要的目的是显示表格类数据。规定在提交表单时所用的方法默认。 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STRE...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
CSS学习笔记(十) 界面组件之表单

摘要：概述表单与其他页面元素的作用不同。属性用于指定服务器上用来处理表单数据的文件的。所谓控件，是对表单中用来收集数据的各种表单组件的通称，包括文本框复选框单选按钮等输入类型。 1.概述表单与其他页面元素的作用不同。其他元素是把服务器发过来的内容显示给用户，而表单则是把用户的信息发送给服务器。 form 元素有两个必要的属性：action 和 method。action 属性用于指定...

andot 2019-08-28 18:05 评论0 收藏0
HTML之body标签中的相关标签补充

摘要：一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距，像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。一列表标签　　列表标签分为三种。　　1、无序列表，无序列表中的每一项是　　　　英文单词解释如下：　　　　　　a.ul：unordered list，无序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 评论0 收藏0