浅谈disabled与readonly的使用区别

项目场景：

 

html写的一个查看编辑页面(要求只允许修改状态，其余输入框值不改变)于是在input输入框使用了disable去禁止输入

---

问题描述

使用disabled会导致数据无法传送到后端

 

代码截图：

 

 

F12开发者工具截图：

可以发现这里传输的body参数只有id

---

原因分析：

在HTML中，disabled和readonly是用来限制用户与表单元素进行交互的两个属性。尽管它们有相似的效果，但它们之间存在一些区别：

1. disabled（禁用）属性：使用disabled属性可以完全禁用一个表单元素，使得用户无法对其进行任何交互操作。禁用的表单元素在外观上通常会显示为灰色，并且不会响应用户的点击或键盘事件。它们也不会被提交到服务器端。禁用的表单元素不会发送任何值，也不会被包含在表单数据集中。

示例：

html

<input type="text" name="username" disabled>

1. readonly（只读）属性：使用readonly属性可以将一个表单元素设置为只读，使得用户可以查看但不能修改其值。只读的表单元素在外观上与可编辑元素无异，并且可以响应用户的点击或键盘事件，但是用户无法修改其内容。只读的表单元素会在表单提交时发送其值，包含在表单数据集中。通常，只读属性适用于一些不需要用户编辑的数据，如显示用户信息或预填充的值。

示例：

html

<input type="text" name="email" readonly>

总结来说，disabled属性会完全禁用一个表单元素，而readonly属性则只是限制用户对其进行修改。选择使用哪一个属性取决于我们想要实现的交互限制的具体需求。

---

 修改后的代码截图：

 

修改后body传输的值：

可以发现这里使用readonly达到了我们本次需求的目的

解决方案：

将disabled修改为readonly