在打印對話框中運行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或打印預覽

回答

相關問題