JavaScript 将表单输入内联粘贴到正文中答案

【问题标题】：JavaScript to paste form input in-line into body textJavaScript 将表单输入内联粘贴到正文中
【发布时间】：2012-01-12 09:26:14
【问题描述】：

我有一个带有输入文本字段的 HTML 表单，我想将其粘贴回 HTML 正文中，从而生成由 JavaScript 函数返回的文本字符串，即在输入字段按顺序排列的位置。一个简单的例子是：

<html>
<body>
This is the first field <input type="text" id="first"/>
and this is the second <input type="text" id="second"/> one.
</body>
</html>

当我现在查看此页面并在字段 1 中输入 ABC 并在字段 2 中输入 XYZ 时，我想知道如何使用 JavaScript 创建如下所示的一段文本：

这是第一个字段 ABC，这是第二个 XYZ 字段。

所以为了清楚起见，网页本身不需要动态更改，我只希望能够从其他地方调用 JavaScript 函数，然后使用当前输入的内容获取结果文本，粘贴到正文中。非常感谢任何帮助。天安

【问题讨论】：

标签： javascript

【解决方案1】：

您可以使用 DOM 循环遍历 body 的子节点（可能是递归的），收集 text nodes 的 nodeValue 属性（这些是包含 "This is the first field " 等的位），并且，您在哪里遇到一个inputelement，得到它的value 属性。将所有这些文本构建成一个字符串，然后就完成了。

一些参考资料：

【讨论】：

谢谢，我的业余尝试得到了最后发布的结果。

【解决方案2】：

将表单文本和输入字段放入 div 并调用 makeRecursive()（即无参数）以启动文本创建。

function makeRecursive(o)
{
    var b = o || document.getElementsByTagName('div')[0];
    var t = "";
    if (b.nodeType === 1 && b.tagName === "INPUT")
        t += b.value;
    else if (b.nodeType === 3)
        t += b.nodeValue;
    if (b.hasChildNodes())
    {
        var c = b.firstChild;
        while (c)
        {
            t += makeRecursive(c);
            c = c.nextSibling;
        }
    }
    return t;
}

【讨论】：