HTML中不可编辑的属性及样式

今天有个需求：用JQ插件作三级联动并实现模糊查询，然后页面初始载入时，各联动为不可编辑状态，除非点击‘编辑’按钮时才可编辑。一般来说，元素是否可以编辑可以通过以下方式来实现：
一、给表单元素添加：readonly属性
这种方式常用于类型为text的input元素，如：<input type=”text” readonly=”readonly”>，使用该属性后，该元素将不可编辑。它的优点是：表单数据可以正常传递到后端。缺点是：适用范围小，像常用类型：radio.checkbox,select的表单元素就不适用。
二、给表单元素添加：disabled属性
这种方式几乎适用所有类型的表单元素，如：<input type=”radio” disabled=”disabled”>，使用该属性后，该元素将不可编辑。它的优点是：适用范围相对大，几乎（因本人未测试所有表单元素）适用所有的表单元素。缺点是：js不作处理的情况下，表单数据无法正常传递到后端。
三、给任何元素添加css样式：pointer-events: none
1、这种方式适用所有元素，而不仅仅是表单元素，我前面碰到的那个需求中不可编辑部分就是靠它实现的，感觉很舒服。
2、这是一个css属性，它所支持的值如下：
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
3、其中常用属性值有：auto和none。
4、关于取值：
auto： 与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。
5、说明：设置或检索在何时成为属性事件的target。
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
对应的脚本特性为pointerEvents。
6、兼容性：

欢迎分享本文，转载请保留出处：前端ABC » HTML中不可编辑的属性及样式