Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:

Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(readonly接受值更改可以回传,disable接受改但不回传数据)。

一般比较常用的情况是:

  1. 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
  2. 经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话,若表单中只有input(text / password)和textarea元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
  3. 我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。

disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的:

  • 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
  • 而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

jquery设置元素的readonly和disabled

Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下。如下:
 1.readonly
    $('input').attr("readonly","readonly")//将input元素设置为readonly
    $('input').removeAttr("readonly");//去除input元素的readonly属性
  
    if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性

   对于为元素设置readonly属性和取消readonly属性的方法还有如下两种:
    $('input').attr("readonly",true)//将input元素设置为readonly
    $('input').attr("readonly",false)//去除input元素的readonly属性

  $('input').attr("readonly","readonly")//将input元素设置为readonly
    $('input').attr("readonly","")//去除input元素的readonly属性
 2.disabled

    $('input').attr("disabled","disabled")//将input元素设置为disabled
    $('input').removeAttr("disabled");//去除input元素的disabled属性
  
    if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性

  对于为元素设置disabled属性和取消disabled属性的方法还有如下两种:
    $('input').attr("disabled",true)//将input元素设置为disabled
    $('input').attr("disabled",false)//去除input元素的disabled属性

  $('input').attr("disabled","disabled")//将input元素设置为disabled
    $('input').attr("disabled","")//去除input元素的disabled属性

html input readonly 和 disable的区别的更多相关文章

  1. readonly 和 disable的区别

    Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textar ...

  2. 在iOS下-input[disabled] 颜色变浅兼容&& input[readonly]仍可获取焦点解决方法

    目标:在写input输入框时,想让其只读不写. 环境:在iPhone上 本来用的时readonly,可是readonly,居然可以获取焦点,不能弹出键盘:安卓手机完全木有问题,所以去用了disable ...

  3. html readonly 和 disable 区别

    readonly 和 disable的区别Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(te ...

  4. 转:表单中Readonly和Disabled的区别(HTML中使用javascript解除禁止input输入框代)

    转:表单中Readonly和Disabled的区别 参考资料: disabled和readonly区别: 参考博文1地址:http://blog.csdn.net/symgdwyh/article/d ...

  5. Readonly和disabled的区别 display:none和visible:hidden的区别

    怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...

  6. (网页)readonly和disabled的区别(转)

    转自脚本之家: 标签的readonly和disabled属性的区别: 在表单元素中,readonly和disable有类似之处,因为它们都可以将一些表单元素设置为"不可用"状态,当 ...

  7. 【转载】表单中 Readonly 和 Disabled 的区别

    今天写代码,遇到表单提交的问题,某个字段在不同的情况下,要传递不同的值进行赋值,试过一些方法都有些问题,后来请教前端同学,使用 disabled 这个属性终于搞定了问题,查到一篇讲解 readonly ...

  8. web基础----->readonly与disabled的区别

    readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,今天我们通过案例来学习一下. readonly和Disabled的区 ...

  9. css readonly和disabled的区别

    一.前言 要说readonly和disabled的区别,就需要先说说两者的联系: 两个属性都可以作用于input等表单元素上,都使得元素成为“不可用”的状态: 两者的字面意义先介绍一下: readon ...

随机推荐

  1. 安装ubuntu vi编辑无法正常使用的时候 如方向键变成ABCD

    http://blog.sina.com.cn/s/blog_7e3f6e8f0100vkon.html 在使用ubuntu的时候,发现vi编辑模式下退格键backspace和上下左右光标移动键不能用 ...

  2. 李洪强漫谈iOS开发[C语言-038]-if else if语句

    李洪强漫谈iOS开发[C语言-038]-if else if语句

  3. linux 防火墙iptables简明教程

    前几天微魔部落再次遭受到个别别有用心的攻击者的攻击,顺便给自己充个电,复习了一下linux下常见的防火墙iptables的一些内容,但是无奈网上的很多教程都较为繁琐,本着简明化学习的目的,微魔为大家剔 ...

  4. React事件处理函数的bind复用和name复用

    一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...

  5. Ping 命令

    Ping”命令是我们在判断网络故障常用的命令 它是用来检查网络是否通畅或者网络连接速度的命令. 它所利用的原理是这样的:网络上的机器都有唯一确定的IP地址,我们给目标IP地址发送一个数据包, 对方就要 ...

  6. ArcEngine中打开各种数据源(WorkSpace)的连接(转)

    ArcEngine中打开各种数据源(WorkSpace)的连接 (SDE.personal/File.ShapeFile.CAD数据.影像图.影像数据集) ArcEngine 可以接受多种数据源.在开 ...

  7. 在PowerDesigner中设计概念模型

    原文:在PowerDesigner中设计概念模型 在概念模型中主要有以下几个操作和设置的对象:实体(Entity).实体属性 (Attribute).实体标识(Identifiers).关系(Rela ...

  8. .md文件 Markdown 语法说明

    Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 链接 强调 ...

  9. *windows下安装以及配置nginx

    1.从nginx官网下载相应的安装包. http://nginx.org/

  10. 【Android多屏适配】动态改变Listview item高度

    在ListView的Adapter中去直接获取传入View的LayoutParams是会报空指针异常的,唯一的方法是在xml中嵌套布局一层LinearLayout <?xml version=& ...