关于html元素disabled和readonly的介绍

来源：互联网发布：gta捏脸数据女生 2017 编辑：程序博客网时间：2024/06/04 23:25

1、两个属性的外观区别。

2、readonly和disabled可以锁定控件，在界面上无法修改元素的值(但是通过javascript可以修改)。

3、基本上所有的元素都有disabled属性，但是不一定有readonly属性，比如select。

4、点击被readonly掉的按钮照样可以触发事件，但是被disabled掉的按钮就无法使用了不管上面有没有事件。

5、readonly的数据是可以提交到服务器的，disabled的数据是无法提交到服务器的。

从提交的url可以看出设置readonly元素值可以提交到服务器，但是设置disabled元素值无法提交到服务器。

示例代码：

<html><head><meta charset="utf-8" /><title>关于html元素的disabled,readonly 的详细分析</title></head><body><form method="get" action="test.php">readonly：<input id="readonly" name="readonly" type="text" readonly="readonly" value="我被设置成了readonly" style="width:300px;" /><input type="button" value="修改readonly框的值" onclick="edit('readonly', '哈哈，我能修改设置了readonly属性元素的值')" readonly="readonly" /><br />disabled：<input id="disabled" name="disabled" type="text" disabled="disabled" value="我被设置成了disabled" style="width:300px;" /><input type="button" value="修改disabled框的值" onclick="edit('disabled', '哈哈，我能修改设置了disabled属性元素的值')" disabled="disabled" /><br /><input type="submit" value="提交" /></form><script type="text/javascript">function edit(id, value){document.getElementById(id).value = value;}</script></body></html>