文章目录

1、disabled和readonly
- 联系
- 区别
- 案例
- 什么属性可以阻止选中或者拷贝文本呢？
- - html
  - css
- hidden 属性是什么？
- - 那么hidden为什么不能和disabled一起使用呢？
2、disabled之后，上面的事件还在吗？
3、焦点是什么？
- DOM0级事件、DOM2级事件是啥？

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

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新语义元素（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中的焦点管理

这里又引出来一个问题

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

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

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

参考：DOM0、DOM1、DOM2级事件

disabled和readonly 以及焦点问题相关推荐

CSS属性disabled和readonly的区别是什么
在博客园中看到这样一篇文章,关于disabled和readonly的区别,以前还真的没有注意它们的区别,还是有必要知道它们的区别的,所以转载了. 这两个属性有类似之处,但是区别也是巨大的,之所以说类似 ...
input中的disabled 和 readonly的区别
1.Readonly只针对input(text / password)和textarea有效, 而disabled对于所有的表单元素都有效, 2.但是表单元素在使用了disabled后,当我们将表单以 ...
Jquery对元素应用disabled和readonly
摘录:Jquery的api中提供了对元素应用disabled和readonly属性的方法 1.readonly $('input').attr("readonly"," ...
Jquery 控制disabled和readonly
Jquery的api中提供了对元素应用disabled和readonly属性的方法,在这里记录下.如下: 1.readonly $('input').attr("readonly&q ...
input属性disabled和readonly的区别（超详细的~~~~）
1.两种情况的写法,没什么太大的区别,两个属性而已 disabled写法:<input type="text" name="aaa" value=&quo ...
input标签disabled和readonly属性的区别
input标签disabled和readonly属性的区别 readonly和disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容. disabled: 对于所有的表单 ...
对于HTML表单输入字段，disabled =“ disabled”和readonly =“ readonly”有什么区别？
我已经阅读了一些,但是似乎找不到关于不同的浏览器如何对待事物的可靠信息. #1楼当元素具有禁用属性时,不会触发任何事件. 以下任何都不会触发. $("[disabled]").c ...
input属性disabled和readonly的区别
两种属性的写法如下: 1.<input type="text" name="name" value="xxx" disabled=&q ...
【转载】表单中 Readonly 和 Disabled 的区别
今天写代码,遇到表单提交的问题,某个字段在不同的情况下,要传递不同的值进行赋值,试过一些方法都有些问题,后来请教前端同学,使用 disabled 这个属性终于搞定了问题,查到一篇讲解 readonly ...

disabled和readonly 以及焦点问题