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

Question

我正试图将<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"> 

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

Answer 1

假设您希望在不刷新页面的情况下使用AJAX来完成这些更新，以修改#filter-display的文本内容，那么每当更新段落的TextNode时，您都可以使用jQuery-val((函数来更改隐藏输入的值属性，并将适当的侦听器(请参阅此问题(应用于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的实际值。