Fe-interview: [html] 第21天 谈谈你对input元素中readonly和disabled属性的理解

[haizhilin2013]

第21天 谈谈你对input元素中readonly和disabled属性的理解

[yxkhaha]

• 相同点：都会使文本框变成只读，不可编辑。
• 不同点：
  1.disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。
  2.disabled属性修饰后的文本框内容，在不可编辑的同时，通过js也是获取不到的。但是用readonly修饰后的文本框内容，是可以通过js获取到的，也就只是简单的不可编辑而已！
  3.disabled属性对input文本框，单选radio,多选checkbox都适用，但是readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的。

[toddmark]

https://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-ht

[github-linong]

获取不到是指？ @yxkhaha

[tzjoke]

disabled 不能focus，submit的时候也不会把这个值包括进来
Angular 中使用响应式表单的时候如果有控件disabled了，form.getValue()并不会包括disabled控件的值，得使用form.getRawValue()

[AricZhu]

相同点：
都会变灰，并且不可编辑
不同点：
disabled以后，无法获取值，而readonly以后，还是可以获取值的。

[Konata9]

总结了前面老哥们的回答，再加上自己查了一下。

在表现上 readonly 和 disabled 都不能让用户对 input 进行编辑。但从含义上两者还是有较大的差别的。

readonly 直译为 “只读”，一般用于只允许用户填写一次的信息，提交过一次之后，就不允许再次修改了。

disabled 直译为 “禁用”，即这个 input 就是不允许填写和使用的（可能是因为权限或者其他原因）。

因此在外观上，readonly 与普通 input 无异，只是点击后无法进行编辑；而 disabled 的 input 呈灰色，也不允许点击。从这两点其实也可以看出，对于 input 的事件，readonly 会响应，而 disabled 是不响应的。并且在传输数据上，disabled 的数据是不会被获取和上传，readonly 的数据会被获取和上传。

[1018715564]

看了楼上几位答案，disabled明可以获取呀，你们是不能获取指的是什么？这样些不对吗？
console.log(document.getElementById("in").value);

可以获取的

[funlee]

看了楼上几位答案，disabled明可以获取呀，你们是不能获取指的是什么？这样些不对吗？
console.log(document.getElementById("in").value);

可以获取的

我试了试，也是可以获取的，不晓得为什么说不能获取

[yyz841875845]

相同点：
都会变灰，并且不可编辑
不同点：
disabled以后，无法获取值，而readonly以后，还是可以获取值的。

readonly 不会变灰吧

[vinceok]

相同点：都会使表单变成不可编辑状态

不同点：

1. readonly是只读(可能是某种特殊处理)，disabled是禁用(可能是权限或其他原因)，意义不同
2. disabled会使文本框变灰，readonly不会
3. disabled对所有表单都使用，readonly对hidden、radio、checkbox、range、color无效
4. disabled的值不会被form收集，readonly的值会

[Renato-Z]

readonly

把表单的属性设置为只读

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

disabled

禁用某个表单

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

不同点

1. 生效范围不同

   • readonly只对可输入的表单有效
   • disabled对所有表单生效

2. 效果不同

   • readonly设置只读，可以获取焦点
   • disabled直接阻止表单的一切操作

3. 提交不同

   • readonly可以正常提交
   • disabled会忽略提交

来和我一起刷3+1吧
gitHub: https://github.com/Renato-Z/exercises/blob/master/history.md

[qiqingfu]

disabled:
这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。

readonly:
这个布尔属性用于指明用户无法修改控件的值。
HTML5 如果控件的 type 属性为hidden, range, color, checkbox, radio, file 或 type时，此属性会被忽略。

[blueRoach]

两者都会使input无法编辑

readonly

• 样式与正常无异
• 可以复制文本
• 可以获取焦点
• 可以正常提交

disabled

• 样式置灰
• 不可复制文本
• 无法获取焦点
• 无法正常提交

[CoderLeiShuo]

• 相同点：都会使文本框变成只读，不可编辑

• 不同点：

  • disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。例如：左侧的input文本框设置了readonly属性，右侧的input文本框设置了disabled属性

  

  • 设置了readonly属性的input元素依然可以获取焦点，但是设置了disabled属性的input元素没有办法获取焦点。

  

  • readonly只针对input和textarea有效，而disabled对于所有的表单元素都有效。

  

• 常用情况：

  • 在某个表单中为用户预先填写了某个内容，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly
  • 常常在用户按了提交按钮后，利用JavaScript将提交按钮禁用掉，可以防止用户反复点击按钮，多次提交。

• 总结：

  • readonly：不可编辑、可复制、可选择、可以接收焦点但不能被修改，后台会接收到传值
  • disabled：不可编辑、不可复制、不可选择、不能接收焦点，后台也不会接收到传值

[smallwebbird]

@funlee 应该指的是提交的时候，disabled修饰的input的值会被忽略

[MrZ2019]

相同点：都会使文本框变成只读，不可编辑。
不同点：
1.disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。
2.disabled属性修饰后的文本框内容，在不可编辑的同时，通过js也是获取不到的。但是用readonly修饰后的文本框内容，是可以通过js获取到的，也就只是简单的不可编辑而已！
3.disabled属性对input文本框，单选radio,多选checkbox都适用，但是readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的。

[cool-delete]

@MrZ2019

相同点：都会使文本框变成只读，不可编辑。
不同点：
1.disabled属性在将input文本框变成只读不可编辑的同时，还会使文本框变灰，但是readonly不会。
2.disabled属性修饰后的文本框内容，在不可编辑的同时，通过js也是获取不到的。但是用readonly修饰后的文本框内容，是可以通过js获取到的，也就只是简单的不可编辑而已！
3.disabled属性对input文本框，单选radio,多选checkbox都适用，但是readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的。

复制一遍有什么意义?