使用指定脚本打印表单时，如何保留输入框元素的值？

嘿，这个问题我之前也踩过坑！核心原因很简单：你用的innerHTML只会获取元素初始的HTML代码，用户在输入框里填的实时值根本不在这个字符串里——那些值存在DOM元素的value属性里，不是写在HTML源码里的。下面给你几个实用的解决方案，按需选就行：

方法一：给原脚本打补丁，同步输入值到HTML属性 #

如果不想大改现有逻辑，就在获取innerHTML之前，手动把所有输入框的实时值同步到对应的HTML属性里，这样新窗口的HTML就能带上用户输入的内容了。修改后的代码如下：

var gAutoPrint = true;
function printDiv(){
    if (document.getElementById != null){
        // 关键步骤：把输入框的实时值同步到HTML属性
        var inputs = document.querySelectorAll("#div_content input, #div_content textarea, #div_content select");
        inputs.forEach(el => {
            if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
                el.setAttribute("value", el.value);
            } else if (el.tagName === "SELECT") {
                // 处理下拉框的选中状态
                const selectedOption = el.querySelector("option:checked");
                if (selectedOption) {
                    // 先清空之前的选中属性
                    el.querySelectorAll("option[selected]").forEach(opt => opt.removeAttribute("selected"));
                    selectedOption.setAttribute("selected", "selected");
                }
            }
        });

        // 下面是你原来的逻辑，不用改
        var html = '<HTML>\n<HEAD>\n';
        if (document.getElementsByTagName != null){
            var headTags = document.getElementsByTagName("head");
            if (headTags.length > 0) html += headTags[0].innerHTML;
        }
        html += '\n</HEAD>\n<BODY>\n';
        var printReadyElem = document.getElementById("div_content");
        if (printReadyElem != null) html += printReadyElem.innerHTML;
        else{
            alert("Error, no contents.");
            return;
        }
        html += '\n</BODY>\n</HTML>';
        var printWin = window.open("","processPrint");
        printWin.document.open();
        printWin.document.write(html);
        printWin.document.close();
        if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");
}

方法二：直接克隆DOM元素，更省心 #

比起拼接HTML字符串，直接克隆目标区域的DOM元素到新窗口会更可靠，因为克隆操作会完整保留元素的所有状态——包括用户输入的value、下拉框的选中项这些，不需要手动同步：

var gAutoPrint = true;
function printDiv(){
    if (!document.getElementById) {
        alert("Browser not supported.");
        return;
    }

    const printReadyElem = document.getElementById("div_content");
    if (!printReadyElem) {
        alert("Error, no contents.");
        return;
    }

    // 深度克隆目标区域的所有元素
    const clonedElem = printReadyElem.cloneNode(true);
    const printWin = window.open("","processPrint");
    const doc = printWin.document;

    // 把原页面的样式和head内容复制过去，保证打印样式一致
    const head = doc.createElement("head");
    if (document.head) {
        head.innerHTML = document.head.innerHTML;
    }
    doc.appendChild(head);

    // 把克隆的内容放到新窗口的body里
    const body = doc.createElement("body");
    body.appendChild(clonedElem);
    doc.appendChild(body);

    doc.close();
    if (gAutoPrint) printWin.print();
}

方法三：用CSS媒体查询，最现代的方式 #

如果不需要打开新窗口，强烈推荐用CSS的@media print来控制打印内容，直接打印当前页面的指定区域——这种方式天然就能保留所有输入值，而且代码最简单：

首先在页面里加一段CSS：

@media print {
    /* 隐藏页面上所有不需要打印的内容 */
    body * {
        visibility: hidden;
    }
    /* 只让需要打印的区域显示 */
    #div_content, #div_content * {
        visibility: visible;
    }
    /* 把打印区域定位到页面顶部，避免留白 */
    #div_content {
        position: absolute;
        left: 0;
        top: 0;
    }
}

然后打印函数简化成这样：

function printDiv(){
    window.print();
}

这种方式不需要复杂的JS逻辑，用户体验也更好——直接在当前页面触发打印，所有输入的内容都会被正确保留。

内容的提问来源于stack exchange，提问作者ashura91