readonly和disabled的区别(disable与readonly的区别)
readonly 和 disable的区别
从英文翻译readonly是只读模式,就是可以读取数据但不能写入数据,disable是无效的意思,既不能读也不能写。
Readonly和Disabled的区别
eadonly 属性规定文本区为只读。
在只读的文本区中,无法对内容进行修改,但用户可以通过 tab 键切换到该控件,选取或复制其中的内容。
可以设置 readonly 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该文本区的使用。然后,可以使用 JavaScript 来清除 readonly 属性,以使文本区变为可编辑状态。
isabled 属性规定应该禁用 input 元素。
disabled 属性可设置或返回是否禁用单选按钮。
注释:disabled 属性无法与 input type="hidden" 一起使用。
disabled 属性会让元素不能获取焦点(比如你按TAB键不能移动到具有disabled属性的元素上),而readonly是可以获得焦点的。
css中 readonly和disabled的区别
两者都起到form表单不能编辑文本框不能输入的作用,区别如下:
1.样式不同
(1)readonly表示只读,一般表示对文字内容只读,即不可更改内容,使用时外观无变(2)disabled表示是残疾,是残废,不管什么内容都会无效;使用时文本框会变灰
2.有效范围不同
(1)readonly只针对input和textarea之类的可以输入的文本有效(2)disabled对所有的表单元素都有效
3.是否获取鼠标标点
(1)readonly为true用户不能编辑但光标可以聚焦(2)disabled为true光标不能聚焦也不可编辑,无鼠标点击或进入等事件
4.是否能够提交数据
(1)readonly不影响表单提交等问题(2)disabled不支持表单等的值被提交
input属性disabled和readonly的区别
1、input type="text" name="name" value="xxx" disabled="true"/
2、input type="text" name="name" value="xxx" readonly="true"/
这两种写法都会使显示出来的文本框不能输入文字,
但disabled会使文本框变灰,而且通过request.getParameter("name")得不到文本框中的内容(如果有的话),
而readonly只是使文本框不能输入,外观没有变化,而且通过request.getParameter("name")可以得到内容。
表单中Readonly和Disabled的区别
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, ...
readonly和disabled区别详解
在中input的属性readonly和disabled让很多用户都觉得是一样的 下面我来给大家介绍readonly和disabled区别 有需要了解的朋友可参考
?
先看input的属性定义 ? 属性 值 描述
disabled? disabled 当 input 元素首次加载时禁用此元素 这样用户就无法在其中写文本 或选定它 ? 注释 不能与 type=hidden 一同使用 ? readonly? readonly? 指示此域的值不能被修改 ? 注释 仅可与 type=text 配合使用
另外我再看看这两个区别 先看代码
readonly代码:input type=text name=readonly readonly="readonly"? /
readonly不可编辑 可复制 可选择 可以接收焦点但不能被修改 后台会接收到传值
disabled代码: input type=text? name=disabled disabled /
disabled不可编辑 不可复制 不可选择 不能接收焦点 后台也不会接收到传值
我们常常在用户按了提交按钮后 利用javascript将提交按钮disabled掉 这样可以防止网络条件比较差的环境下 用户反复点提交按钮导致数据冗余地存入数据库
disabled和readonly这两个属性有一些共同之处 比如都设为true 则form属性将不能被编辑 往往在写js代码的时候容易混合使用这两个属性 其实他们之间是有一定区别的
如果一个输入项的disabled设为true 则该表单输入项不能获取焦点 用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效 最重要的一点是当提交表单时 这个表单输入项将不会被提交
而readonly只是针对文本输入框这类可以输入文本的输入项 如果设为true 用户只是不能编辑对应的文本 但是仍然可以聚焦焦点 并且在提交表单的时候 该输入项会作为form的一项提交
?代码如下 复制代码
!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" "
xmlns="
head
meta equiv="Content Type" content="text/; charset=utf " /
titleUntitled Document/title
/head
body
form id="form " name=form action=""
input name=q type=text id="q " value="readonly" readonly="true" /
input name=q type=text disabled id="q " value="disabled" /
input type=submit name=Submit value="Submit" /
/form
/body
/
小技巧
diabled:可用readonly代替 background color:#cccccc;加上灰色背景色就可以
?代码如下 复制代码
input id="mytext" type=text value="我是不能用的" input type=button value="disabled" onClick="javascript: document all mytext disabled false " input type=button value="enable" onClick="javascript: document all mytext removeAttribute( disabled )"
注意 document all mytext disabled 表单控件不能用
document all mytext disabled 表单控件能用
?代码如下 复制代码
input id="mytext" type=text value="我是能用的" input type=button value="disable" onClick="if (mytext disabled mytext disabled value= 我是不能用的 ;this value= enable } else { mytext disabled value= 我是能用的 ;this value= disable }"
jquery设置元素的readonly和disabled
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属性
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属性
lishixinzhi/Article/program/Java/JSP/201311/20064