使用 window.print() 打印时输入字段的文本未打印答案

【问题标题】：text of input field is not printing while print using window.print()使用 window.print() 打印时输入字段的文本未打印
【发布时间】：2015-06-14 04:36:14
【问题描述】：

我有以下 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>

以及该 html 页面 head 部分中的 printDiv('print') 函数：

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
}

但是在填写后打印表单时，它没有显示用户在输入框中输入的输入字段的文本。但相同表单的输入字段的预定义文本（此处为日期字段）照常打印。

如何重写 javascript 函数，以便它同时打印输入字段的文本？

【问题讨论】：

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

标签： javascript html printing

【解决方案1】：

这是因为 innerHTML 不反映用户在输入字段中的更改。见innerHTML example: With user input it doesn´t work, why?。更好的解决方案是使用 CSS stylesheet 控制可打印内容。

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

我在打电话，所以我无法测试它，您可能需要更新您的 HTML 和 CSS，以免嵌套冲突的显示规则

【讨论】：

为了特定目的，我必须使用该 javascript 函数来选择 div 内的内容。我不能使用 hide 方法隐藏页面的所有其他内容，除了 div 内容。
那么您可能需要手动将所有字段的值复制到您创建的表单中（通过设置innerHTML），并在您重新创建整个body标签时。请记住，使用 innerHTML 重新创建整个页面通常会出现问题，因为丢失了事件处理程序。

【解决方案2】：

几年后，但是......我有一个解决这个问题的想法，它对我有用。很简单：

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

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

问候。

【讨论】：

这对 2021 年的我也很有效。

【解决方案3】：

我不太确定您在问什么，但如果您想要的话，以下代码将显示用户输入以及原始正文。它不使用 window.print();不过。

    function printDiv() {
        var printContents = document.forms[0].elements[0].value + "<br>" + document.forms[0].elements[1].value + "<br>";
        var originalContents = document.body.innerHTML;
        document.write(printContents + originalContents);
    }

【讨论】：

感谢您的代码。但我不清楚您的代码将如何打印输入文本以及其他文本。那个div里面的printContents中可能还有其他的文字，比如这里有一个文字'请仔细填写此表格：'。您的代码仅打印表单。但是如何打印表单文本以及该目标 div 内的所有其他文本。