知识大全 readonly和disabled区别详解

Posted 2022-07-20 元素

篇首语：笛里谁知壮士心，沙头空照征人骨。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 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>

　　<title>Untitled Document</title>

　　</head>

　　<body>

　　</form>

　　</body>

　　</>

　　小技巧

　　diabled:可用readonly代替 background color:#cccccc;加上灰色背景色就可以

代码如下复制代码

　　注意 document all mytext disabled 表单控件不能用

　　document all mytext disabled 表单控件能用

代码如下复制代码

　　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属性

cha138/Article/program/Java/JSP/201311/20064