通常在内容查看,打印预览等页面,需要对表单控件做只读显示,即不能更改控件的状态。这里我们会用到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"属性即可。
分享到:
相关推荐
表单控件-Input控件 表单控件 学习表单的核心就是学习表单控件,HTML语言提供了一系列的表单控件,用于定义不同的表单功能,如密码输入框、文本域、下拉列表、复选框等。 表单控件 表单控件常用在登录和注册模块 ...
表单控件-textarea控件 表单控件 表示多行文本框控件,其基本语法格式如下: 每行中的字符数" rows="显示的行数"> 文本内容 表单控件 textarea可选属性 属性 属性值 描述 name 由用户自定义 控件的名称 readonly ...
基于 ElementPlus 的表单只读态控件,完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入.zip
在html中有两种禁用表单提交的方法,他们分别是: 1.给控件标签加\u4e0areadonly='readonly'...从字面意思我们可以知道,试用readonly属性的控件是只读的,而试用disabled是被禁用的。那么他们的区别是什么呢? 只读
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value="中国"> 的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。 方法1: ...
但是有时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的。 在html中有两种禁用的方法,他们分别是: 1.给控件标签加上readonly=’readonly’属性 2.给...
vForm 这是一套通过json配置表单的工具,包含。 TODO: 支持多语种切换 表单验证模块 input类的H5 form控件,... 表格\控件的只读模式 控件开发 Select Date DateTime SelectGrid tree hyperlink 表单伸缩
本文主要给大家介绍的是关于jquery form表单序列化的一些注意事项,分享出来供大家参考学习,下面话不多说,来...最重要的一点, 在发送表单的时候,表单的控件属性没有name属性该字段不会发送,也不会形成键值对;表单控
5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...
5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...
5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...
5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...
5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...
5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...
产品特点 :check_mark_button: 在表单上添加/删除表情符号React该控件允许用户对表单上的记录做出React。 :check_mark_button: 能够配置可用表情符号集用户可以根据每个控件配置表情符号React。 :check_mark_button:...
-使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性)。 -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...
问题 2-11: 为什么在运行时刻修改表单新的 Scrollbars 属性时,表单上并不显示滚动条? 答案: 在表单建立之前,Visual FoxPro 会读入表单的 Scrollbars 属性设置,因为此属性的值将决定表单的创建方式。如果 ...
2 <br>0003 设置程序代码行序号 3 <br>0004 开发环境全屏显示 3 <br>0005 设置窗口的自动隐藏功能 3 <br>0006 根据需要创建所需解决方案 4 <br>0007 如何使用“验证的目标架构”功能 4 ...
3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、...
-使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性)。 -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...