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

Question

我有以下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函数以便打印输入字段的文本aslo？

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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

问候。