Textarea mit horizontaler Regel erscheint auf dem Druck

Question

Ich arbeite derzeit an einer Website, wo ein Benutzer eine mechanische Anfrage von einem Kunden auf der Website betrachten kann. Sie können dann die Anfrage ausdrucken.

Ich versuche, die Anfrage nur auf der gedruckten Version eine "Notizen" -Abschnitt hinzuzufügen. Ich benutze Bootstrap, also versteckt es, bis der Druck einfach ist.

Mein Problem ist, dass ich horizontale Linien in das Textfeld, genau wie diese Antwort haben wollen: <textarea> with horizontal rule

Die Linien lassen sich gut auf der das Textfeld. Das Problem ist, dass sie nicht zeigen, wenn window.print() aufrufen

Auf der Seite:

Beim Drucken:

Gibt es eine Möglichkeit zu Machen Sie das in der Druckversion sichtbar?

<dt class="visible-print"> 
    Notes 
</dt> 

<dd class="visible-print"> 
    <textarea class="notes" rows="10" cols="100"></textarea> 
</dd> 

.notes { 
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-size: 100% 100%, 100% 100%, 100% 31px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
    line-height: 31px; 
    font-family: Arial, Helvetica, Sans-serif; 
    padding: 8px; 
} 

Answer 1

Die meisten Leute haben ihre Browser auf die Standardoption festlegen „nicht Hintergründe drucken.“ Eine dunkle Hintergrundseite kann deine Tinte schnell auffressen! Wenn Ihre "Zeilen" unter Verwendung von "Hintergrund" implementiert werden, werden sie nicht gedruckt.

Als Workaround versuchen Sie, ein unabhängiges Image zu erstellen. Stellen Sie den Z-Index entsprechend ein (denken Sie daran, die Position zu verwenden), und blenden Sie ihn dann vom Bildschirm css aus, und zeigen Sie ihn nur für die Druck-CSS an.

Answer 2

Dies wurde in ähnlichen Situationen berichtet, wie die <textarea> vor dem Drucken gerendert wird. Eine Lösung, die es wert ist, betrachtet zu werden, besteht darin, die <textarea> als Standard <div> oder ein anderes Element vor/während des Aufrufs zum Drucken zu duplizieren.

Eine Ressource, die ein Beispiel zeigt, wie man eine <textarea> mithilfe von jQuery ersetzen kann, finden Sie hier: http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/.