一. 范围不同
readonly
只对 <input> 和 <textarea> 标签有效
disabled
对所有表单元素都有效, 包括:
<input>, <textarea>, <button>, <label>, <option>, <select>
等
二. 程度不同
readonly
只是将元素设置为只读,不可输入,对其它操作没有影响
disabled
阻止元素的一切操作。包括 获取焦点,点击事件等
三. 表单提交
readonly
只是将元素设置为只读,不影响表单提交
disabled
设置了该属性的表单元素,值将不会随着表单一起提交
四. JavaScript操作
设置了readonly和disabled的表单元素,用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的,同样背景色,字体颜色等也可以通过JavaScript来改变。例如:下面的代码运行在chrome浏览器中时,点击“点我”后两个input框的字体颜色、背景色,值都会发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
height:30px;
width: 200px;
}
</style>
</head>
<body>
<input id="input1" type="text" value="1" readonly="true">
<input id="input2" type="text" value="2" disabled="true">
<input type="button" οnclick="test()" value="点我">
<script>
function test(){
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
input1.style.cssText = 'color:red;background-color:green'
input2.style.cssText = 'color:red;background-color:green'
input1.value = 6;
input2.value = 6
}
</script>
</body>
</html>