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

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/