首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

表单控件的只读展示

2012-10-25 
表单控件的只读显示?? ? 通常在内容查看,打印预览等页面,需要对表单控件做只读显示,即不能更改控件的状态。

表单控件的只读显示

?? ? 通常在内容查看,打印预览等页面,需要对表单控件做只读显示,即不能更改控件的状态。这里我们会用到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"属性即可。

?

热点排行