前端 表单中的readOnly 和 disabled有什么区别？

概念：

readOnly和disabled是两种在表单元素中设置的属性，用于控制用户对表单元素的操作权限。

1. disabled：设置为disabled的表单元素会被禁用，用户无法对其进行任何操作，包括输入、点击等。通常用于临时禁用某个表单元素，或者在特定条件下禁止用户交互。例如，一个按钮在某些条件下会被禁用，用户无法点击执行相关操作。

   <button type="button" disabled>禁用按钮</button>
   

2. readOnly：设置为readOnly的表单元素仍然可以接收焦点，但用户无法修改其值。通常用于展示信息或者防止用户更改特定字段的值。例如，一个只读的输入框可以显示某个计算结果，用户可以查看但无法编辑。

   <input type="text" value="只读文本" readonly>
   

区别： 

• readOnly仍然可以接收焦点，用户可以选中文本内容，但无法修改；disabled无法接收焦点，用户无法选择文本内容，也无法进行其他操作。
• 提交表单时的行为 ： readOnly：表单中的readOnly元素的值会被提交到服务器，用户无法修改该值，但服务器端仍然可以获取到该值。disabled：表单中的disabled元素的值不会被提交到服务器，即使用户修改了该元素的值，服务器端也无法获取到。
• 样式表现：readOnly：通常readOnly元素会显示为可编辑的文本框，用户可以选中文本内容，但无法修改。disabled：disabled元素通常会显示为灰色，不可编辑的状态，用户无法对其进行任何操作。
• JavaScript交互：readOnly：虽然用户无法通过界面修改readOnly元素的值，但可以通过JavaScript来修改其值。disabled：disabled元素无法通过JavaScript来修改其值，因为该元素被禁用了。