`
littcai
  • 浏览: 245300 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
社区版块
存档分类
最新评论

表单控件的只读显示

 
阅读更多

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

 

分享到:
评论

相关推荐

    使用HTML开发商业网站-表单控件-input课件.pptx

    表单控件-Input控件 表单控件 学习表单的核心就是学习表单控件,HTML语言提供了一系列的表单控件,用于定义不同的表单功能,如密码输入框、文本域、下拉列表、复选框等。 表单控件 表单控件常用在登录和注册模块 ...

    使用HTML开发商业网站-表单控件-textarea课件.pptx

    表单控件-textarea控件 表单控件 表示多行文本框控件,其基本语法格式如下: 每行中的字符数" rows="显示的行数"> 文本内容 表单控件 textarea可选属性 属性 属性值 描述 name 由用户自定义 控件的名称 readonly ...

    基于 ElementPlus 的表单只读态控件,完美适配所有表单组件支持 npm 与 cdn 方式的引入

    基于 ElementPlus 的表单只读态控件,完美适配所有表单组件。主要用于新建页与详情页动态切换。支持 npm 与 cdn 方式的引入.zip

    html表单控件禁用属性readonly VS disabled介绍

    在html中有两种禁用表单提交的方法,他们分别是:  1.给控件标签加\u4e0areadonly='readonly'...从字面意思我们可以知道,试用readonly属性的控件是只读的,而试用disabled是被禁用的。那么他们的区别是什么呢?  只读

    HTML中让表单input等文本框为只读不可编辑的方法

    有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value="中国"> 的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。 方法1: ...

    HTML中禁用表单控件的两种方法readonly与disabled

    但是有时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的。 在html中有两种禁用的方法,他们分别是: 1.给控件标签加上readonly=’readonly’属性 2.给...

    vForm:这是一套通过json配置表单的工具。设计意愿是用户通过所见即所得编辑器生产业务表单

    vForm 这是一套通过json配置表单的工具,包含。 TODO: 支持多语种切换 表单验证模块 input类的H5 form控件,... 表格\控件的只读模式 控件开发 Select Date DateTime SelectGrid tree hyperlink 表单伸缩

    关于jquery form表单序列化的注意事项详解

    本文主要给大家介绍的是关于jquery form表单序列化的一些注意事项,分享出来供大家参考学习,下面话不多说,来...最重要的一点, 在发送表单的时候,表单的控件属性没有name属性该字段不会发送,也不会形成键值对;表单控

    ASP.NET3.5从入门到精通

    5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...

    ASP.NET 3.5 开发大全11-15

    5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...

    ASP.NET 3.5 开发大全

    5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...

    ASP.NET 3.5 开发大全word课件

    5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...

    ASP.NET 3.5 开发大全1-5

    5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...

    ASPNET35开发大全第一章

    5.17.1 表单验证控件(RequiredFieldValidator) 5.17.2 比较验证控件(CompareValidator) 5.17.3 范围验证控件(RangeValidator) 5.17.4 正则验证控件(RegularExpressionValidator) 5.17.5 自定义逻辑验证控件...

    React:一组PCF控件,可将表情符号React功能添加到Power Platform上的模型驱动的应用程序中

    产品特点 :check_mark_button: 在表单上添加/删除表情符号React该控件允许用户对表单上的记录做出React。 :check_mark_button: 能够配置可用表情符号集用户可以根据每个控件配置表情符号React。 :check_mark_button:...

    ExtAspNet_v2.3.2_dll

    -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性)。 -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...

    vfp6.0系统免费下载

    问题 2-11: 为什么在运行时刻修改表单新的 Scrollbars 属性时,表单上并不显示滚动条? 答案: 在表单建立之前,Visual FoxPro 会读入表单的 Scrollbars 属性设置,因为此属性的值将决定表单的创建方式。如果 ...

    C#编程经验技巧宝典

    2 <br>0003 设置程序代码行序号 3 <br>0004 开发环境全屏显示 3 <br>0005 设置窗口的自动隐藏功能 3 <br>0006 根据需要创建所需解决方案 4 <br>0007 如何使用“验证的目标架构”功能 4 ...

    html入门到放弃笔记

    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、...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性)。 -使用Hidden控制Window控件的显示隐藏,Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...

Global site tag (gtag.js) - Google Analytics