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 " />
<title>Untitled 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
威孚半导体技术
2024-08-19 广告
