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

Question

我想将 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 中？

更新：

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

Answer 1

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

没有 HTML 属性反映这一点。

如果你想存储它，那么你需要显式存储它。

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

Answer 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>

Answer 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>

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

How to include user input in the html string of a some parent DOM element?

html

javascript

jquery

html-input

html5-history

问题：

代码片段

更新：