文档文库
手机版
投诉建议
热门搜索:
心得体会
演讲稿
思想汇报
首页
心得体会
学习心得体会
培训心得体会
军训心得体会
社会实践
作风建设
工作心得体会
教育心得体会
演讲稿
演讲稿格式
演讲稿范文
竞聘演讲稿
师德演讲稿
三分钟演讲稿
思想汇报
思想汇报范文
转正思想汇报
大学生思想汇报
季度思想汇报
教师思想汇报
工作计划
工作计划格式
工作计划开头
工作计划结尾
总结与计划
工作计划模板
工作总结
年终工作总结
年度工作总结
个人工作总结
实习报告
实习报告范文
实习计划范文
实习鉴定范文
实习报告内容
个人简历
求职简历
简历范文
简历模板
简历表格
简历格式
祝福语
春节
除夕
元宵
端午节
合同范文
合同范本
合同样本
合同范本格式
首页
>
Readonly和Disabled的区别
Readonly和Disabled的区别
发布时间: 来源:
文档文库
小
中
大
字号:
手机查看
表单中
Readonly
和
Disabled
的区别
2010-06-22
Readonly
和
Disabled
是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内
容。但是它们之间有着微小的差别,总结如下:
Readonly
只针对
input(text / password
和
textarea
有效,而
disabled
对于所有的表单元素都
有效,包括
select, radio, checkbox, button
等。
但是表单元素在使用了
disabled
后,当我们将表单以
POST
或
GET
的方式提交的话,这个元素的值
不会被传递出去,
而
readonly
会将该值传递出去
(这种情况出现在我们将某个表单中的
textarea
元素设
置为
disabled
或
readonly
,但是
submit button
却是可以使用的)。
一般比较常用的情况是:
在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该
将它的属性设置为
readonly
。
经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而
是只能够查看,由于
disabled
的作用元素范围大,所以此时应该使用
disabled
,但同时应该注意的是要
将
submit button
也
disabled
掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性
检测的话,数据库中的值就会被清除。
如果说在这种情况下用
readonly
来代替
disabled
的话,若表单中只有
input(text/password
和
textarea
元素,
那还是可以的,
如果存在其他发元素,
比如
select
,
用户可以在重新改写值后按回车键进
行提交(回车是默认的
submit
触发按键)。
我们常常在用户按了提交按钮后,利用
javascript
将提交按钮
disabled
掉,这样可以防止网络条件比较
差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。
disabled
和
readonly
这两个属性有一些共同之处,比如都设为
true
,则
form
属性将不能被编辑,
往往在写
js
代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的。
如果一个输入项的
disabled
设为
true
,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击
和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
而
readonly
只是针对文本输入框这类可以输入文本的输入项,如果设为
true
,用户只是不能编辑对
应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为
form
的一项提交。
小技巧:
diabled
可用
readonly
代替,
background-color:#cccccc;
加上灰色背景色就可以。
01
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
02
03
05
Untitled Document
06
07
08
09
1
1
1
2
13
14
15
input
的字段当为
diabled
时时无法获取数值得,所以最近不要用这个,我们可以用
readonly
带替
代,即可解决这类问题。
1
isabled="disabled">
放在
form
表单中提交后得不到该值。
将
disabled="disabled"
改为
readonly = "readonly"
即可
,
按照
W3C
的规范:
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12
设置为
disabled
的
input
将会有下面的限制:
不能接收焦点
使用
tab
键时将被跳过
可能不是
successful
的
设置为
readonly
的
input
将会有下面的限制:
可以接收焦点但不能被修改
可以使用
tab
键进行导航
可能是
successful
的
只有
successful
的表单元素才是有效数据,也即是可以进行提交。
disabled
和
readonly
的文本输
入框只能通过脚本进行修改
value
属性。
这两个属性在效果和使用上的区别:
1.
readonly
是要锁定这个控件,通过在界面上无法修改他(但是通过
javascript
可以修改他)。
2.
disabled
和
readonly
有相同的地方也是可以锁定这个控件用户不能改变他的值,但是
disabled
的更彻
底一些,
他是要使你完全不能使用他,
包括改变他的背景颜色
(不信,
你去修改一个被
disabled
掉的
input
文本框,你发现你是徒劳),如果是
checkbox
则不能选中他。
3.
所有控件都有
disabled
属性,但是不一定有
readonly
属性,如
select
下拉框。点击被
readonly
掉的
按钮照样可以触发事件,但是被
disabled
掉的按钮就无法使用了不管上面有没有事件。
将
div
设置
disabled
属性之后,
整个
div
都灰掉了,
但是文本框里面还是可以输入内容的。
注意:
select
下拉选择框是没有
readonly
属性的
大家仔细想一下会有一个问题出现,就是有时候我们写程序的时候,比如一个购买商品的页面,我们
可以在上面输入商品的数量,但是价格我们设置成只读的,最后下面有一个总价格就是
数量
*
只读的价
格,
那么我们很可能就是这样做的,
在后台的时候读取
商品数量的
textbox
值,
然后读取