input 中 readonly 和 disabled 的区别
2018-10-11 本文已影响12人
大雄的学习人生
三大区别：
1. disabled 使得我们提交的表单不会包括该值
2. disabled 针对所有的表单元素都有效
readonly 只针对 input(text/password) 和 textarea 有效
3. disabled 阻止点击事件
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--
disabled 使得我们提交的表单不会包括该值
服务端拿到的 body：
{ readonly: 'readonly' }
-->
<form
action="http://localhost:3000/postForm1"
method="post"
style="display: flex; flex-direction:column; width: 200px"
>
<input name="readonly" value="readonly" readonly onclick="hello()" />
<input name="disabled" value="disabled" disabled onclick="hello()"/>
<!--
disabled 针对所有的表单元素都有效
readonly 只针对 input(text/password) 和 textarea 有效
-->
<select readonly>
<option>readonly1</option>
<option>readonly2</option>
</select>
<select disabled>
<option>disabled1</option>
<option>disabled2</option>
</select>
<button type="submit">submit</button>
</form>
<script>
// disabled 阻止点击事件
function hello() {
alert('hello')
}
</script>
</body>
