disabled和readonly 以及焦点问题

今天吃饭，和后台谈论了一下他的面试问题，感觉几个问题都直击重点，这里菜鸟就总结一下！

1、disabled和readonly

两者的字面意义先介绍一下：

1. readonly表示 “只读” ，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单根本没有readonly属性

2. 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”> 一起使用。

说到这里，其实有引出了两个问题

1. 什么属性可以阻止选中或者拷贝文本呢？
2. hidden 属性是什么？

什么属性可以阻止选中或者拷贝文本呢？

html

具体见我的博客：重学前端 重要且实用的HTML5新语义元素（mark标记文本/progress任务进度/meter度量衡/是否可编辑内容/details补充/已移除）（第七天）

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 属性设置！

参考：深入理解javascript中的焦点管理

这里又引出来一个问题

1. DOM0级事件、DOM2级事件是啥？

DOM0级事件、DOM2级事件是啥？

其实就是一种标准/规范！

参考：DOM0、DOM1、DOM2级事件