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

I have following html layout:

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

and the printDiv('print') function in the head section of that html page:

和该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;
}

but while printing the form after filled-up, it is not showing the text of input fields that an user entered in the input box. but the predefined text (here the date field) of the input field of the same form is printing as usual.

但是在填充后打印表单时，它不会显示用户在输入框中输入的输入字段的文本。但是相同表格的输入字段的预定义文本（这里是日期字段）照常打印。

How can I rewrite the javascript function so that it will print the text of input fields aslo?

如何重写javascript函数以便打印输入字段的文本aslo？

3 个解决方案

#1

That's because innerHTML does not reflect changes by the user in input fields. See innerHTML example: With user input it doesn´t work, why?. A better solution is to use a CSS stylesheet to control the printable content.

这是因为innerHTML不反映用户在输入字段中的更改。请参阅innerHTML示例：使用用户输入它不起作用，为什么？更好的解决方案是使用CSS样式表来控制可打印内容。

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

I am on a phone so I can't test it, you may need to update your HTML and CSS so that you don't have nested conflicting display rules

我在手机上，所以我无法测试它，您可能需要更新您的HTML和CSS，以便您没有嵌套的冲突显示规则

#2

I'm not too sure what you are asking, but the following code will display the user inputs along with the original body if that is all you want. It does not use window.print(); though.

我不太确定你在问什么，但如果你想要的话，下面的代码将显示用户输入以及原始主体。它不使用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);
    }

#3

Some years later, but... i have an idea to solve this that worked for me. It's very simple:

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

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

We only collect the input value and, in the change event, replace it with the same value that we just entered using attr(). When replacing, it's already recorded in the DOM and will be loaded when we trying to print. I don't think that more explanation is needed, it's very simple.

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

Regards.

问候。

#1

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