input 标签的 disabled 和 readonly 属性

首先这两种属性都会使显示出来的文本框不能输入。

 

　　disabled 属性：规定禁用 input 元素。被禁用的 input 元素既不可用，也不可点击和编辑，使用 tab 键时将会被跳过，用户的所有操作对该输入项都无效。会使文本框变灰。

　　此属性对所有的表单元素都有效，但是表单元素在使用了 disabled 后，当我们将表单以 POST 或 GET 的方式提交的话，这个表单元素值不会被提取，也不会被提交。

注意：disabled 属性无法与 <input type="hidden"> 一起使用。

 

　　readonly 属性：规定输入字段为只读。此时我们不能编辑对应的文本，但可以聚焦焦点或使用 tab 键切换到该字段，还可以选中或拷贝其文本。外观没有变化。

　　只对文本输入框有效 ( input: text / password  和 textarea ）。表单元素的 value 值仍能提取，在提交表单的时候，也会被提交。

 

常用情况：

1. 某个表单不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为 readonly 。
2. 在用户点击提交按钮后，防止用户反复点击提交按钮导致数据重复多次存入数据库，可以利用 js 将按钮 disabled。