如何在某个父 DOM 元素的 html 字符串中包含用户输入？

Posted 2023-03-05

【中文标题】如何在某个父 DOM 元素的 html 字符串中包含用户输入？

【英文标题】：How to include user input in the html string of a some parent DOM element?

【发布时间】：2019-11-05 23:43:19

【问题描述】：

我想通过运行以下行将 div 容器的内容存储在 Windows 历史记录中：

window.history.pushState($('#myDivId').html(), "title", 'some url');

我稍后会在用户按下后退按钮时使用此信息。

---

问题：

用户有一个表单要填写，只有一个输入。用户输入他的名字（比如 John）并点击提交。 onSubmit 函数被触发，在这里我获取父 div 的 html 内容并将其存储在历史对象中。问题是，此示例中的用户输入 (John) 未被捕获。

以下屏幕截图显示了我的脚本在下面的输出：

代码片段

function onSubmit() 
   var str = $('#myDivId').html();
   alert("this goes to windows history: " + str);
   // window.history.pushState($('#myDivId').html(), "title", 'some url');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
   <div id="myDivId">
      First name: <input id="firstNameId" type="text" name="FirstName" value=""><br>
      <input type="submit" value="submit">
   </div>
</form>

如何在将用户输入推送到历史记录之前将其包含在str 中？

更新：

这是一个简化的例子，在真实场景中我在容器中有几个输入字段。所以我正在寻找一种通过容器捕获所有输入值的方法。

【问题讨论】：

$('#myDivId').html() 将给出 div 的整个 HTML 内容，而不是输入框的值

谢谢，我已经添加了问题的更新。所以 div 包含服务器 linput 值，我希望找到一种简单的方法来通过部分 div 捕获所有这些输入。

【参考方案1】：

value 属性表示字段的默认 值，而不是当前值。

没有反映这一点的 HTML 属性。

如果你想存储它，那么你需要明确存储它。

我会通过使用serializeArray()（并将其转换为 JSON 以存储在历史记录中）来解决此问题，然后循环它以将数据恢复到表单中。

【参考方案2】：

我不清楚你在问什么。根据我的理解，我提供了一个解决方案。

function onSubmit() 
  $("#firstNameId").attr('value', $("#firstNameId").val())
   var str = $('#myDivId').html();
   alert("this goes to windows history: " + str);
   // window.history.pushState($('#myDivId').html(), "title", 'some url');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
   <div id="myDivId">
      First name: <input id="firstNameId" type="text" name="FirstName" value=""><br>
      <input type="submit" value="submit">
   </div>
</form>

【参考方案3】：

这里我使用delegate event 将value 属性设置为value 属性

function onSubmit() 
   var str = $('#myDivId').html();
   alert("this goes to windows history: " + str);
   // window.history.pushState($('#myDivId').html(), "title", 'some url');


$(document).on('input', '.attr-input', function() 
  $(this).attr('value', this.value)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
   <div id="myDivId">
      First name: <input id="firstNameId" class="attr-input" type="text" name="FirstName" value=""><br>
      <input type="submit" value="submit">
   </div>
</form>