如何获取包含用户当前输入值的表单字段对应的HTML代码？

问题原因 #

用户在表单中输入内容时，浏览器只会更新对应DOM节点的实时属性（property），不会修改初始HTML标记对应的属性（attribute），所以直接调用innerHTML只能拿到初始化时的HTML结构，不会包含用户输入的内容。

实现代码 #

你可以先把所有表单元素的当前值同步到HTML属性上，再获取innerHTML即可，以下是适配了常见表单类型的完整实现：

JavaScript代码 #

function getHtmlWithUserInput(container) {
  // 同步input值
  const inputs = container.querySelectorAll('input');
  inputs.forEach(input => {
    if (input.type === 'checkbox' || input.type === 'radio') {
      input.checked ? input.setAttribute('checked', 'checked') : input.removeAttribute('checked');
    } else {
      input.setAttribute('value', input.value);
    }
  });

  // 同步textarea值
  const textareas = container.querySelectorAll('textarea');
  textareas.forEach(textarea => {
    textarea.textContent = textarea.value;
  });

  // 同步select下拉框值
  const selects = container.querySelectorAll('select');
  selects.forEach(select => {
    const options = select.querySelectorAll('option');
    options.forEach(option => {
      option.selected ? option.setAttribute('selected', 'selected') : option.removeAttribute('selected');
    });
  });

  return container.innerHTML;
}

function go() {
  const container = document.getElementById('example');
  alert(getHtmlWithUserInput(container));
}

HTML代码和原有逻辑一致 #

<div id=example>
  <input type=text />
  <textarea></textarea>
  <input type=button value=go onclick="go()" />
</div>

效果说明 #

调用上述方法后，你拿到的HTML就会包含用户输入的所有内容，input会带上当前值的value属性，textarea标签内部会插入用户输入的文本，多选、单选、下拉框的选中状态也会同步到HTML属性中。

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