disabled和readonly的区别

写法

<input type="text" readonly>
<input type="text" disabled>
复制代码

共同点

1. 都会使文本框变成只读，不可编辑

不一样点

1. disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，可是readonly不会。
2. disabled属性修饰后的文本框内容，在不可编辑的同时，经过js也是获取不到的。可是用readonly修饰后的文本框内容，是能够经过js获取到的，也就只是简单的不可编辑而已！
3. disabled属性对input文本框，单选radio,多选checkbox都适用，可是readonly就不适用，用它修饰后的单选以及多选按钮仍然是能够编辑状态的。
4. disabled属性是能够应用于全部的表单元素上面, 而readonly则是只能应用在input(text / password)和textarea
5. 表单设置disabled属性以后,表单的数据不能进行传输,若是传输的话则会为null,而readonly则不影响

总结

1. disabled样式会改变,对于全部的表单元素都有效,输入项不能获取焦点，用户的全部操做（鼠标点击、键盘输入等）对该输入项都无效,而且数据不能进行传输
2. readonly只是使文本框不能输入，外观没有变化,只针对input(text / password)和textarea之类能够输入文本的输入项有效,用户不能编辑，但鼠标仍然能够聚焦,而且数据能够进行传输