如何在不刷新页面的情况下将文本从段落元素复制到输入值？答案

【问题标题】：How do I copy text from a paragraph element to an input's value without refreshing the page?如何在不刷新页面的情况下将文本从段落元素复制到输入值？
【发布时间】：2018-12-31 10:08:23
【问题描述】：

我正在尝试将<p> 元素内的文本复制到<input> 元素的value 属性中。

段落文本包含.30, .31, .6, .38，而这段文本是通过jQuery脚本更新的，没有刷新页面，所以我每次都需要用段落的新内容更新<input>的value属性：

<p id="filter-display">.30, .31, .6, .38</p>

更新后的输入应如下所示：

<input type="hidden" name="tags" value=".30, .31, .6, .38">

有什么方法可以在每次更改时更新输入的 value 属性以反映段落的文本？

【问题讨论】：

您的标签汤让您无法理解您要做什么？这个客户端javascript需要使用jquery修改DOM吗？还是需要生成不同的 HTML 输出的服务器端 java 或 php？而ajax和它有什么关系？
#filter-display 中的 id 是由 jquery 生成的，我需要在同一时间将相同的 id 放入隐藏输入中
如果我们能看到更新p 标记的逻辑将会有所帮助。还有你说的“不充电”，你指的是什么？
如果是jQuery生成的，你想让jQuery也生成隐藏的输入元素，那你为什么要标记java、php和@ 987654336@?他们似乎与您的问题没有任何关系。

标签： javascript php jquery html ajax

【解决方案1】：

假设你想在不刷新页面的情况下使用AJAX来完成这些更新，以便修改#filter-display的文本内容，那么每当段落的TextNode更新时，你可以使用jQuery val() function更改隐藏输入的 value 属性，并将适当的侦听器（参见 this question）应用于 TextNode 或段落：

var $filter_display = $("#filter-display");

$filter_display[0].firstChild.addEventListener("DOMCharacterDataModified", function() {
    $("#my-hidden-input").val($filter_display.text());
});

纯 JavaScript：

var filter_display_text = document.getElementById("filter-display").firstChild;

filter_display_text.addEventListener("DOMCharacterDataModified", function() {
     document.getElementById("my-hidden-input").value = filter_display_text;
});

遗憾的是，jQuery 还没有一种方便的方法来获取元素的实际 TextNode，text() 返回给定元素中所有嵌套 TextNode 的实际值。

【讨论】：