1、disabled和readonly
两者的字面意义先介绍一下：
-
readonly表示 “只读” ，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单根本没有readonly属性
-
disabled表示 “使残废，使无效” ，管你有没有文字内容，都无法使用，可以作用于全部表单元素
联系
先说说两者的联系：
两个属性都可以作用于input等表单元素上，都使得元素成为 无法编辑 的状态
区别
案例
readonly 属性规定输入字段为只读
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
注释：readonly 属性可与 < input type="text"> 或 < input type="password"> 配合使用。
disabled 属性规定应该禁用 input 元素
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
注释：disabled 属性无法与 < input type="hidden"> 一起使用。
说到这里，其实有引出了两个问题
- 什么属性可以阻止选中或者拷贝文本呢？
- hidden 属性是什么？
什么属性可以阻止选中或者拷贝文本呢？
html
具体见我的博客：HTML5新语义元素你都知道吗？
css
user-select:none
hidden 属性是什么？
详情见我的博客：你从未见过的最全input元素讲解！！！
那么hidden为什么不能和disabled一起使用呢？
其实不应该说不能一起用，而应该说一起用没什么意义，毕竟hidden的作用就是隐藏字段，并在提交的时候一并提交了，但是disabled直接就不提交，那么又不显示又不提交，这个表单元素本身就没有什么实际意义，所以不需要！
2、disabled之后，上面的事件还在吗？
<form action="">
<input type="text" readonly onclick="console.log(111)" onfocus="console.log(1111)" onblur="console.log(11111)" value="111111">
<input type="text" disabled onclick="console.log(222)" onfocus="console.log(2222)" onblur="console.log(22222)" value="111111">
<input type="text" onclick="console.log(333)" onfocus="console.log(3333)" onblur="console.log(33333)" value="111111">
<input type="hidden" disabled value="2222">
<button disabled onclick="alert('aaa')">disabled按钮</button>
<button onclick="alert('bbb')">disabled按钮</button>
</form>
运行结果表明，disabled之后上面的事件是不复存在的。
注意：
这里之所以不用alert是因为，onblur 和 onfocus会因为弹窗要点击确认而不停的循环！
3、焦点是什么？
菜鸟理解的焦点是：每次点击鼠标，鼠标都会将点击到的元素作为焦点，但是并不是所有元素都有获取焦点的能力，只有有用户交互的元素才是真的有焦点，所以焦点的onfocus 常用于 input、select、button、 a ，其他元素没有，需要自己通过 tabIndex 属性设置！
这里又引出来一个问题
- DOM0级事件、DOM2级事件是啥？
DOM0级事件、DOM2级事件是啥？
其实就是一种标准/规范！
