表单控件的只读显示
?? ? 通常在内容查看,打印预览等页面,需要对表单控件做只读显示,即不能更改控件的状态。这里我们会用到2个常用属性readonly和disable。
?? ? 当readonly为true时,表单控件表现为不可编辑;当disable为true时表单控件表现为不可编辑(同时控件颜色变灰)。对于输入型控件(如text、textarea)这2个属性都是好用的;但是对于选择型控件(如radio、checkbox)则不然,即时设置了readonly属性,你会发现控件仍然可以变更状态,设置disable虽然能达到不可编辑的目的,但是控件颜色变灰了。
?? ? 为了实现最终的显示效果(不可编辑,同时控件颜色不变灰),我们只能特定方法实现了。
?
利用透明遮罩层,覆盖在页面最上层。最简单的方法,且不用修改具体代码,用JS写个小插件即可。缺点是无法再选中表单内容。如果希望只实现表单控件的不可编辑,可使用如下方法:对于radio控件,将其name属性去除使其变为独立控件,由于无法切换状态,达到不可编辑的目的。对于checkbox控件,设置其onclick="return false;",即禁用了按钮点击事件,达到不可编辑的目的。对于text、textarea控件,设置readonly="readonly"属性即可。?