如何将表单中可编辑Span元素的内容保存到MySQL数据库

只有<input>、<textarea>、<select>这类原生表单元素，才会在表单提交时自动将内容封装到请求参数中发送给后端。<span>不属于表单元素，即使添加name和contenteditable属性，提交时也不会被浏览器识别为表单字段，所以后端$_POST接收不到Ddesc参数，自然无法更新到数据库。

优先推荐方案一，无需额外写JS，改造成本最低，兼容性最好。

方案一：调整输入框样式模拟span效果 #

直接用<input>/<textarea>，通过CSS调整样式，实现和span完全一致的规整布局效果，同时保留表单提交能力。

1. 替换原span部分代码：

<!-- 原span代码删除，替换为下方内容，需要多行就把input改成textarea -->
<td >
  <input type="text" name="Ddesc[]" class="txtField mimic-span" value="<?php echo $row[$i]['Ddesc']; ?>">
</td>

2. 在CSS中添加新样式：

.mimic-span {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}
/* 如果用textarea支持多行，额外加下面的样式 */
/*
textarea.mimic-span {
  resize: none;
  line-height: inherit;
  font-family: inherit;
}
*/

方案二：可编辑span搭配隐藏输入框同步内容 #

如果一定要保留contenteditable的span，通过JS将span的编辑内容同步到隐藏的表单元素中，提交时发送隐藏元素的值。

1. 替换原span部分代码：

<td >
  <input type="hidden" name="Ddesc[]" class="hidden-desc" value="<?php echo $row[$i]['Ddesc']; ?>">
  <span class="txtField" role="textbox" contenteditable><?php echo $row[$i]['Ddesc']; ?></span>
</td>

2. 在页面</body>标签前添加JS代码：

// 监听所有可编辑span的输入事件，同步内容到隐藏输入框
const editableSpans = document.querySelectorAll('span[contenteditable]');
const hiddenDescInputs = document.querySelectorAll('.hidden-desc');
editableSpans.forEach((span, idx) => {
  // 编辑时实时同步
  span.addEventListener('input', () => {
    hiddenDescInputs[idx].value = span.innerText.trim();
  });
});

当前代码直接将$_POST参数拼接到SQL语句中，存在严重的SQL注入风险，建议改用mysqli预处理语句传递参数，避免数据库被恶意篡改。

内容的提问来源于stack exchange，提问作者prograa