项目场景:
html写的一个查看编辑页面(要求只允许修改状态,其余输入框值不改变)于是在input输入框使用了disable去禁止输入
问题描述
使用disabled会导致数据无法传送到后端
代码截图:
F12开发者工具截图:
可以发现这里传输的body参数只有id
原因分析:
在HTML中,
disabled
和readonly
是用来限制用户与表单元素进行交互的两个属性。尽管它们有相似的效果,但它们之间存在一些区别:
disabled
(禁用)属性:使用disabled
属性可以完全禁用一个表单元素,使得用户无法对其进行任何交互操作。禁用的表单元素在外观上通常会显示为灰色,并且不会响应用户的点击或键盘事件。它们也不会被提交到服务器端。禁用的表单元素不会发送任何值,也不会被包含在表单数据集中。示例:
html
<input type="text" name="username" disabled>
readonly
(只读)属性:使用readonly
属性可以将一个表单元素设置为只读,使得用户可以查看但不能修改其值。只读的表单元素在外观上与可编辑元素无异,并且可以响应用户的点击或键盘事件,但是用户无法修改其内容。只读的表单元素会在表单提交时发送其值,包含在表单数据集中。通常,只读属性适用于一些不需要用户编辑的数据,如显示用户信息或预填充的值。示例:
html
<input type="text" name="email" readonly>
总结来说,
disabled
属性会完全禁用一个表单元素,而readonly
属性则只是限制用户对其进行修改。选择使用哪一个属性取决于我们想要实现的交互限制的具体需求。
修改后的代码截图:
修改后body传输的值:
可以发现这里使用readonly达到了我们本次需求的目的
解决方案:
将disabled修改为readonly