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 example: With user input it doesn´t work, why?。更好的解决方案是使用a CSS stylesheet来控制可打印内容。

+ (NSString *)activeUserId {
    return [FBSDKAccessToken currentAccessToken].userID;
}

我在手机上，因此无法测试，您可能需要更新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中，并在我们尝试打印时加载。我不认为需要更多解释，这很简单。

问候。

使用window.print（）

3 个答案: