在打印对话框中运行jQuery或打印预览

我正在打印一个页面，其中会有输入，它会频繁打印。打印时，页面需要完全不同的布局，并提供不同的标签和信息。为了使这更简单，我已经为Print和Screen分别获得了CSS，并且标签对应于来自前景的数据。在打印对话框中运行jQuery或打印预览

这里就是我的工作的简化版本：

<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触发器？

页面上有大约15个输入。如果在检查打印内容时我无法更新它们，而是必须在更改/键盘上执行它，是否有避免为每个输入写入单独函数的方法？我正在考虑使用类，但是我不知道如何将信息获取到隐藏div上的正确标签。

来源

2014-11-24 MikeOShay

你可以试试吗？

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/

来源

2014-11-24 21:58:53 caslaner

我想我会去的第二回答。通常情况下，我认为当输入失去焦点时调用Change，但显然它也在Print Preview上调用，这对我的目的起作用。为了记录，前者在Chrome上似乎不适用于我，但是它在Firefox上。我会确保在代码中使用一致的命名策略，它应该可以工作。谢谢！ – MikeOShay 2014-11-25 19:53:05

在打印对话框中运行jQuery或打印预览

回答

相关问题