最近在工作中遇到一个需要只读的表单字段也要可以提交过去,之前只读都是用的disabled,加上这个属性之后,表单字段就提交不过去了。
后来发现可以换成readOnly,但是readOnly只支持 input,select不支持,所以就得想别的办法。
然后就发现了CSS里pointer-events属性,简直是个黑科技。
以下是pointer-events的介绍
CSS pointer-events 属性
实例
设置元素是否对指针事件做出反应:
div.ex1 { pointer-events: none; } div.ex2 { pointer-events: auto; }
CSS 语法
pointer-events: auto|none;
属性值
属性值 | 描述 |
---|---|
auto | 默认值。元素对指针事件做出反应,比如 :hover 和 click。 |
none | 元素不对指针事件做出反应。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
所以,我们实现以上的场景就可以将需要只读的字段,赋值一个class,然后通过这个CSS属性,来控制只读效果,只需要额外加一个只读的背景色就好了。
如下所示:
.readOnly select {pointer-events: none;background:#f7f7f7;}