|
在html中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" /> disabled不可编辑不可复制不可选择不能接收焦点后台也不会接收到传值
我们常常在用户按了提交按钮后利用javascript将提交按钮disabled掉这样可以防止网络条件比较差的环境下用户反复点提交按钮导致数据冗余地存入数据库
disabled和readonly这两个属性有一些共同之处比如都设为true则form属性将不能被编辑往往在写js代码的时候容易混合使用这两个属性其实他们之间是有一定区别的 如果一个输入项的disabled设为true则该表单输入项不能获取焦点用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效最重要的一点是当提交表单时这个表单输入项将不会被提交 而readonly只是针对文本输入框这类可以输入文本的输入项如果设为true用户只是不能编辑对应的文本但是仍然可以聚焦焦点并且在提交表单的时候该输入项会作为form的一项提交 代码如下 复制代码 <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" " <html xmlns=" <head> <meta httpequiv="ContentType" content="text/html; charset=utf" /> <title>Untitled Document</title> </head> <body> <form id="form" name="form" method="get" action=""> <input name="q" type="text" id="q" value="readonly" readonly="true" /> <input name="q" type="text" disabled="disabled" id="q" value="disabled" /> <input type="submit" name="Submit" value="Submit" /> </form> </body> </html> 小技巧 diabled:可用readonly代替backgroundcolor:#cccccc;加上灰色背景色就可以 代码如下 复制代码 <input id="mytext" type="text" value="我是不能用的">
<input type="button" value="disabled" onClick="javascript: documentallmytextdisabled=false">
<input type="button" value="enable" onClick="javascript: documentallmytextremoveAttribute(disabled)"> 注意documentallmytextdisabled=true表单控件不能用 documentallmytextdisabled=false表单控件能用 代码如下 复制代码 <input id="mytext" type="text" value="我是能用的">
<input type="button" value="disable" onClick="if (mytextdisabled==false){ mytextdisabled=true;mytextvalue=我是不能用的;thisvalue=enable} else { mytextdisabled=false;mytextvalue=我是能用的;thisvalue=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属性
去除属性推荐使用removeAttr()这种方式新版本jquery会不支持attr("readonly""")这种写法
|
