记录一个CSS黑科技属性--pointer-events

最近在工作中遇到一个需要只读的表单字段也要可以提交过去,之前只读都是用的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;}

 

上一篇:C. Random Events


下一篇:pointer-events