Question

我在一个页面上工作，上面会有经常打印的输入。打印时，页面需要完全不同的布局，并显示不同的标签和信息。为了简化这一点，我为打印和屏幕提供了单独的CSS，以及与前景数据相对应的标签。

这是我正在使用的简化版本：

<style>
@media screen {
    #testback {display: none;}
    #txtName
    {
        padding: 10px;
        margin: 10px 20px;
        border-radius: 8px;
        border: 2px solid #888;
    }
}

@media print {
    #testfore {display: none;}
    #lblName {
        position: absolute;
        top: 5%;
        right: 25%;
    }
}    
</style>

<div id="testfore">
    <input id="txtName" type="text" placeholder="Name..." />
</div>

<div id="testback">
    <label id="lblName"></label>
</div>

JSFiddle：http://jsfiddle.net/h1vu13p1/1/

我希望采用简约方法，只有在用户决定打印页面时，即打印预览或打印对话框时，才会更新后台内容。是否有任何连接到这些事件的JQuery触发器？

页面上有大约十五个输入。如果我在检查打印内容时无法更新它们，而是必须在更改/键盘上进行更新，是否有办法避免为每个输入编写单独的函数？我正在考虑使用课程，但后来我不知道如何将信息提供给隐藏div上的正确标签。

Answer 1

你能试试吗？

window.onbeforeprint = function() {
    $('#lblName').text($('#txtName').val());
};

http://jsfiddle.net/7LL2hwwk/

如果你想用js来解决这个问题，你可以看一下：

$('input[id^="txt"]').on('change',function(){
    var name = $(this).attr('id');
    $('#lbl'+name.replace('txt', '')).text($(this).val());
});

http://jsfiddle.net/d5b39w8c/

在打印对话框或打印预览上运行JQuery

1 个答案: