`

readonly,disabled,display区别

 
阅读更多

 

Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是submit button却是可以使用的)。
一般比较常用的情况是:
1.在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly
2.经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围 大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况 下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认 的submit触发按键)

3.style="display:none"隐藏然后还不占空间位置了
3.我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。

  1. <input type= "text"  name= "name"  value= "value"  disabled= "true"  /> 
  2. <input type="text"  name= "name"  value= "value"  readonly= "true"  />
  3. 这两个属性都会使显示出来的文本框不能输入文字,但是disabled会使文本框变灰,而且通过request.getParameter("name")得不到文本框的内容(如果有内容的话)。

    而readonly只是使文本框不能输入文字,外观没有变化,而且通过request.getParameter("name")可以得到文本框中的内容。

 

分享到:
评论
1 楼 speed_guo 2011-11-01  
分析的很仔细。

相关推荐

    js事件文本框不可用

    除了`disabled`属性外,还可以使用`readonly`属性来实现对文本框内容的只读控制。 #### 示例代码分析: ```javascript inputtext.readonly = true; ``` 这行代码将`inputtext`对象设置为只读模式。 ```html ...

    如何提交表单中disabled表单域的值示例代码

    首先,我们需要理解为什么不能简单地使用`readonly`替代`disabled`。`readonly`属性虽然不让用户修改元素的值,但用户仍然可以选中并聚焦该元素,且浏览器会将其值包含在提交的数据中。然而,`disabled`元素则完全不...

    php.ini中安全的设置

    - **关闭错误报告**:设置 `display_errors = Off` 可以关闭错误报告。 - **错误日志记录**:同时设置 `error_reporting` 为 `E_WARNING&E_ERROR` 来记录警告和错误信息。 #### (11) 错误日志记录 除了在屏幕上...

    Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)

    注意:对于只读属性(readonly),通常用于文本输入框,设置只读属性的jQuery代码为`$(‘#input_field_id’).attr(“readonly”, “readonly”);`,取消只读则使用`removeAttr(“readonly”)`。 三、LigerUI控件...

    html 文本框(text)不可用只读的多种实现方法

    同样,`disabled`属性用于禁止用户对文本框的编辑,但请注意,与`readonly`不同,`disabled`的文本框不会随表单一起提交。 在选择合适的实现方式时,应考虑用户体验、可访问性以及表单数据提交的需求。例如,如果...

    web前端面试题及答案.doc

    4. **Input的readonly和disabled**:`readonly`属性使输入框变为只读,用户无法编辑但可选中复制;`disabled`属性则禁用输入框,呈灰色且无法编辑。 5. **Form的method和action**:`method`指定提交数据的方式,如...

    web前端面试题.pdf

    1.3 form表单中input标签的readonly和disabled属性 readonly属性表示只读,不可以修改,而disabled属性表示禁用,整个文本框是显示灰色状态。 2. XHTML和HTML的区别 XHTML元素必须被正确地嵌套、闭合、区分大小写...

    js做的上传文件的加载条

    &lt;input id="percent" type="text" size="20" class="put2" readOnly/&gt; ϴ" onclick="count()"/&gt; ``` - `div#up` 包含了进度条的视觉元素,其中: - `,Ե&lt;/span&gt;` 可能是用于样式或占位符的文本。 - `...

    domino xpages 开发 权限相关 控件只读

    需要注意的是,"readonly"属性并不意味着“禁用”,只读控件中的数据仍可以被复制,并且在提交表单时会被发送到服务器。 对于禁用控件,我们可以使用`disabled`属性,例如: ```javascript document....

    web前端面试题及答案复习进程.docx

    - **readonly与disabled**:readonly属性使得input元素内容只能读取,不能编辑;disabled属性则使元素完全不可交互,显示为灰色。 - **form的method和action**:method定义数据提交的方式,如GET或POST;action...

    今日头条2017秋招前端工程师笔试试卷.pdf

    - `getElementById` 用于获取ID为特定值的元素,`setAttribute` 可以修改元素的属性,如设置 `readonly` 或 `disabled` 属性。 - `CSS ID` 选择器优先级高,`#button1` 直接选中ID为`button1`的元素。 4. **CSS...

    最新web前端面试题及答案.docx

    #### form表单中input标签的readonly和disabled属性有何区别 - `readonly`属性:使得输入框变为只读状态,用户不能编辑其中的内容,但是仍然可以获取焦点,且表单验证时会检查此字段。 - `disabled`属性:使得...

    2009 达内Unix学习笔记

    集合了 所有的 Unix命令大全 ...telnet 192.168.0.23 自己帐号 sd08077-you0 ftp工具 192.168.0.202 tools-toolss ... 各个 shell 可互相切换 ksh:$ sh:$ csh:guangzhou% bash:bash-3.00$ ... 命令和参数之间必需用空格隔...

    html-css-toboolist

    - `readonly` 属性使输入字段变为只读,用户无法修改内容,但可复制。 - `required` 属性强制表单字段在提交前必须填写,常见于`&lt;input&gt;`、`&lt;textarea&gt;`等。 2. CSS条件选择器与布尔逻辑 CSS允许使用条件选择器来...

    Javascript知识点汇总.pdf

    4. **常用布局结构**:包括浮动布局(使用`float`属性)、定位布局(`position`属性)、Flex布局(`display: flex`)和Grid布局(`display: grid`)。 5. **编写习惯**:保持代码整洁,合理使用注释,遵循语法规则...

    vue组件开发

    &lt;input type="text" v-model.number="value" readonly /&gt; &lt;button @click="increase" :disabled="value &gt;= maxValue"&gt;+ ``` 3. **属性与数据绑定**:Vue中的`v-model`指令用于实现双向数据绑定,这里我们用...

    Ext.form.TextField最简单的用法.docx

    10. **hideMode**: 决定如何隐藏组件,可以是`display`、`offsets`或`visibility`。 11. **inputType**: 输入字段的类型,如`text`、`password`、`file`等。默认为`text`。 12. **invalidText**: 当输入无效时显示...

    javaEE大神宝典(面试吹水专用)

    19. Readonly/Disabled:只读/禁用,分别用于使输入字段不可编辑或失效。 20. Action:表单的处理动作,指定提交表单后服务器处理请求的URL。 21. Method:方法,定义了向服务器发送数据的方式,通常有GET和POST两种...

    JQuery中操作Css样式的方法

    最后,操作HTML元素的属性可以通过`attr()`方法实现,如设置`input`元素为只读(`readonly`)或禁用(`disabled`)状态。例如,`$('input').attr("readonly",true)`会将所有input元素设置为只读状态,而`$('input').attr...

Global site tag (gtag.js) - Google Analytics