Javascript 使用window.print（）打印时，输入字段的文本未打印

我有以下html布局：

Please fill up this form carefully:
<input type="button" onclick="printDiv('print'); return false;" value="Print" />
<div id="print">
  <form action="" method="post">
     <input type="text" name="user_name" value="" />
     <input type="text" name="address" value="" />
     <input type="text" name="date" value="14-06-2015" />
     <input type="submit" value="SUBMIT" />
  </form>
</div>

但在填写后打印表单时，它不会显示用户在输入框中输入的输入字段文本。但是，同一表单的输入字段的预定义文本（这里是日期字段）正在像往常一样打印

---

我如何重写javascript函数，使其能够同时打印输入字段的文本？

我不太确定您的要求，但以下代码将显示用户输入以及原始正文（如果这是您想要的）。它不使用window.print（）；不过

函数printDiv（）{
var printContents=document.forms[0]。元素[0]。value+“
”+document.forms[0]。元素[1]。value+“
”；
var originalContents=document.body.innerHTML；
文件。书写（打印内容+原始内容）；
}

这是因为innerHTML不反映用户在输入字段中所做的更改。看见更好的解决方案是使用 控制可打印内容

@media print {
    body {display:none};
    #print {display: block};
}

---

我在打电话，所以无法测试，您可能需要更新HTML和CSS，以便几年后不会出现嵌套的冲突显示规则，但是。。。我有一个解决这个问题的办法，这个办法对我很有效。很简单：

$('form#myId input').bind("change", function() {
    var val = $(this).val();
    $(this).attr('value',val);
});

我们只收集输入值，在change事件中，将其替换为刚才使用attr（）输入的相同值。替换时，它已记录在DOM中，并将在尝试打印时加载。我认为不需要更多的解释，这很简单

---

问候。

你到底想达到什么目的？您希望他们能够填写表单，然后打印并提交？Seth MrClaine，如果用户希望在提交前打印，则是。请记住，这只是为了显示我所面临的问题。这并不重要，用户为什么要在打印前打印表单，或者页面可能会显示提交的表单，用户可以从那里打印。这是一个测试用例。如果希望显示当前值，可以在使用innerHTML之前循环输入和

input.setAttribute（“value”，input.value）

。我必须使用该javascript函数来选择div中的内容，以达到特定目的。我无法使用hide方法隐藏页面的所有其他内容，div内容除外。然后，您可能需要手动将所有字段的值复制到您创建的表单中（通过设置innerHTML），并在重新创建整个正文标记时进行复制。请记住，使用innerHTML重新创建整个页面通常会有问题，因为事件处理程序会丢失。谢谢您的代码。但我不清楚您的代码将如何打印输入文本和其他文本。该分区内的printContents中可能有其他文本，例如这里有一个文本“请仔细填写此表单：”。您的代码只打印表单。但我如何才能打印表单文本以及目标div中的所有其他文本。这在2021年对我来说也非常有效。

@media print {
    body {display:none};
    #print {display: block};
}

$('form#myId input').bind("change", function() {
    var val = $(this).val();
    $(this).attr('value',val);
});