Stylesheet drucken - Eingaben in Text umwandeln

Question

Ich habe eine Tabelle mit einigen Feldern <input type="text">, und ich möchte, dass diese beim Drucken als normaler Text angezeigt werden. Ich habe eine media = „print“ Sheet mit

input 
{ 
border-style: none; 
} 

darin einrichten und diese entfernt der Grenze so dass der Inhalt sieht genauso aus wie Text, aber der Eingang ist noch die Breite des Spalts zu ihrer tatsächlichen Breite drückt (nicht überraschend), damit ich unnötige Leerraum- und Spaltenbreiten erhalte. Gibt es eine unkonventionelle Möglichkeit, die Eingabebreite irgendwie mit CSS auf die Inhaltsgröße zu setzen oder eine andere Möglichkeit, dies zu beheben?

Jemand in einem anderen Forum schlug vor, eine Druckschaltfläche zu verwenden, die clientseitige Skripterstellung erstellt, um die Seitenmarkierung physisch zu ändern, aber das ist leider aufgrund der Komplexität und Dynamik der Seite nicht wirklich praktisch.

Ich bin mir ziemlich sicher, dass das nicht getan werden kann, aber ich dachte, ich würde fragen.

Answer 1

Nein, ich denke nicht, dass dies ohne etwas Scripting getan werden kann. Aber das Scripting wäre wirklich einfach, mit einem Rahmen wie JQuery zu erreichen:

• Für jedes Eingabeelement, würden Sie ein <span> daneben erstellen und eine Klasse geben, die in der media="screen" Sheet verborgen ist, und sichtbar in media="print".

• Das Eingabeelement selbst würde eine Klasse erhalten, die umgekehrt funktioniert, sichtbar in screen und versteckt in print.

• Jedes Eingabeelement würde ein change Ereignis erhalten, das die benachbarten span aktualisiert.

Ich habe die JQuery Routine noch nicht das, aus dem Ärmel zu ziehen und nicht die Zeit, die jetzt zusammen zu stellen, aber es ist auf jeden Fall lösbar und noch recht unauffällig - keine Notwendigkeit zur Ausführung Skripting, wenn der Benutzer mit dem Drucken beginnt.

Ich wette, wenn Sie die Frage erneut Tag oder einen neuen fragen, einer unserer resident JQuery-Gurus wird es einen Blick :)

Answer 2

input { border-style: none; display: inline} 

Answer 3

ich auf dieser Suche kam für Informationen darüber, wie Stil meine Formen und ein paar andere Dinge.

Nachdem ich mit CSS herumgespielt habe, habe ich eine CSS-Methode gefunden, die für mich funktioniert.

Meine Formulare haben alle Styling mit Farbhintergrund und einen Rahmen, der schwarz ist.

In meiner Druck-CSS-Datei habe ich mein Formular CSS kopiert und alle Farben (nicht den Text selbst) in Weiß geändert. Mit anderen Worten, es versteckt mein Textfeld und zeigt nur den Text an.

Original CSS - #Formular Textbereich, #Formeingabe, #Form wählen {Rahmen: 1px fest #ddd; Farbe: # 313131; }

Drucken CSS - #Formular Textfeld, #Formeingabe, #Form wählen {Rahmen: 1px fest #fff; Farbe: #fff; }

wirkt wie ein Zauber =>

this helps

Answer 4

ich ASP.NET und hatte das gleiche Problem bin mit.

Ich löste es durch ein Label hinzufügen, die zu meiner Textbox entspricht, und hatte zwei Klassen ein:

In @media Bildschirm:

.hdnPrint {visibility:visible;display:block;} 
.visPrint {visibility:hidden;display:none;} 

In @media Druck:

.hdnPrint {visibility:hidden;display:none;} 
.visPrint {visibility:visible;display:block;} 

Für das Textfeld habe ich die hdnPrint-Klasse zugewiesen, und auf dem Etikett habe ich die visPrint-Klasse zugewiesen. Wenn der Benutzer das Formular druckt, wird das Etikett angezeigt und das Formularfeld ist ausgeblendet.

Ich nehme an, Sie können etwas ähnliches in einer Nicht-ASP.NET-Umgebung tun, indem Sie das gleiche Muster folgen.

Kein Skript erforderlich.

Answer 5

Wenn Sie Bootstrap verwenden:

@media print { 
    .no-print { 
    display: none !important; 
    } 

    .form-control 
    { 
    border: 0; 
    padding:0; 
    overflow:visible; 
    } 
} 

Answer 6

Um die Breite der Eingabefelder in dem CSS-Druckabschnitt zu definieren, zu verwenden:

width: ?cm 

für die entsprechenden Eingabeelemente.

Getestet in Firefox; vielleicht funktionierte es in früheren Versionen des Browsers nicht.