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

问题描述

我有以下html布局：

I have following html layout:

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页头部分的printDiv（'print'）函数：

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

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.

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

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

推荐答案

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

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 aCSS stylesheet to control the printable content.

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

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

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

这篇关于使用window.print（）打印时，输入字段的文本不会打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！