it-swarm.com.de

Drucken Sie, wenn der Textbereich überläuft

Ich habe ein Formular mit einigen Textbereichen, die eine Bildlaufleiste ermöglichen, wenn der Text das Textfeld überschreitet. Der Benutzer möchte den Bildschirm drucken können, und dieser Text ist nicht sichtbar. Wie mache ich den gesamten Text für den Druck sichtbar? Brauche ich es besser, einen Link zu pdf oder etwas zu drucken?

39
Timothy Ruhle

Sie können dieses Problem nicht allein mit CSS lösen .

Warum Pure-CSS-Lösungen nicht ausreichen (mit Demo)

Lassen Sie sich von den Antworten mit Print Stylesheets und overflow: visible überzeugen. Öffnen Sie diese Seite und schauen Sie sich das an Quelle. Genau das, was sie vorgeschlagen haben, richtig? Jetzt drucken Sie die Vorschau aus (z. B. in Chrome 13 unter OS X, wie ich). Beachten Sie, dass Sie nur eine oder zwei Zeilen der Notiz sehen können, wenn Sie versuchen zu drucken!

Hier ist noch einmal die URL für meinen Testfall: https://alanhogan.github.io/web-experiments/print_textarea.html

Lösungen:

  1. Ein JavaScript-Link, der ein neues Fenster öffnet und den Inhalt des Textbereichs zum Drucken darauf schreibt. Oder:

  2. Wenn der Textbereich aktualisiert wird, kopieren Sie seinen Inhalt in ein anderes Element, das für den Bildschirm ausgeblendet, aber beim Drucken angezeigt wird.

  3. (Wenn Ihr textarea schreibgeschützt ist, kann auch eine serverseitige Lösung verwendet werden.)

Beachten Sie, dass textarea Whitespace standardmäßig anders behandelt als HTML. Daher sollten Sie das CSS white-space: pre-wrap; in dem neuen Fenster, das Sie öffnen, bzw. auf Ihren Helfer div anwenden. IE7 und ältere Versionen verstehen pre-wrap jedoch nicht. Wenn dies ein Problem ist, akzeptieren Sie es oder verwenden Sie eine Problemumgehung. Oder machen Sie das Popup-Fenster zu einem reinen Textfenster, das buchstäblich mit einem Medientyp text/plain bedient wird (für den wahrscheinlich eine serverseitige Komponente erforderlich ist).

Die “Print Helper” -Lösung (mit Code + Demo)

Ich habe eine Demo einer JavaScript-Technik erstellt .

Das Kernkonzept besteht darin, den Textbereichsinhalt in einen anderen Druckhilfsprogramm zu kopieren. Code folgt.

HTML:

<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>

CSS (alle/nicht gedruckt):

/* Styles for all media */
#print_helper {
  display: none;
}

CSS (Druck):

/* Styles for print (include this after the above) */
#print_helper { 
    display: block;
    overflow: visible;
    font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
    white-space: pre;
    white-space: pre-wrap;
}
#the_textarea {
  display: none;
}

Javascript (mit jQuery):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
  function copy_to_print_helper(){
    $('#print_helper').text($('#the_textarea').val());
  }
  $('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
    copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
  });
  copy_to_print_helper(); // on initial page load
});
</script>

Wiederum ist die erfolgreiche JavaScript-basierte Demo unter https://alanhogan.github.io/web-experiments/print_textarea_js.html verfügbar.

65
Alan H.

Durchlaufen Sie jeden Textbereich und verschieben Sie den Inhalt zu einem Halter

    window.onbeforeprint = function () {
        $('.print-content').remove();
        $('textarea').each(function () {
            var text = $(this).val();
            $(this).after('<p class="well print-content">' + text + '</p>');
        });
    }

Und verwenden Sie das folgende CSS

.print-content {
  display: none !important;
}

@media print {
  .print-content {
    display: block !important;
  }
  textarea {display: none !important;}
}
5
Samuel Gray

Ich bin kürzlich auf die gleiche Ausgabe gestoßen. Meine Lösung bestand darin, den Inhalt zur Bearbeitung in Formularsteuerelemente und zum Drucken in Divs zu kopieren. 

In meinem Kopf stecke ich ein Druckvorlagenblatt. 

<link rel="stylesheet" href="printform.css" type="text/css" media="print" />

In printform.css habe ich folgendes eingefügt

.screenOnly { display: none; }
.printOnly { display: inline-block; }

Für Textbereiche (und andere Feldtypen, die Probleme verursachten) habe ich den folgenden Code verwendet

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>

Bei der Anzeige auf dem Bildschirm werden die Textbereiche angezeigt und die Divs, die ihren Inhalt kopieren, werden ausgeblendet. Beim Drucken gilt das Gegenteil. 

Ich weiß, dass Sie bereits eine Antwort auf diese Frage ausgewählt haben, aber während Sie das Druck-Stylesheet verwenden, ist es eine gute Idee, eine konkrete Lösung zu beschreiben. Überlauf einstellen: Sichtbar im Textbereich (meine erste Idee) hat nicht funktioniert, also habe ich die obige Lösung gewählt. Wenn Sie immer noch Schwierigkeiten haben, hoffe ich, dass dies Ihnen hilft

4
GordonM

Dies scheint für die Anwendung auf alle Elemente zu funktionieren, die überfließenden Inhalt haben:

$("textarea").each(function () {
    var Contents = $(this).val();
    if ($(this)[0].scrollHeight > $(this).height()) {
        $(this).after("<div class='print-helper'>" + Contents + "</div>");
        $(this).addClass("no-print");
    }
});
1
MILWAUKEE3333

Ermutigen Sie das Problem auch in letzter Zeit. Vielen Dank für die Beiträge von Alan H. Es funktioniert perfekt mit Chrome und Safari. Bei IE und Firefox besteht jedoch das Problem, dass die letzten Seiten (Seitenelemente nach Textfeld) beim Drucken (FF), fehlende Seiten und überlappendes Layout (IE9) fehlen.

Eine weitere Erkenntnis, die hilfreich sein kann, um das Problem zu lösen, besteht darin, dass Sie die Zeileneigenschaften von textarea korrekt einstellen können, da die Höhe des Steuerelements besagt, dass es mit CSS-Überlauf funktionieren kann: sichtbare Elemente. Alle Browser scheinen die Zeilen-Eigenschaft beim Drucken zu respektieren.

1
Ben G

Definieren Sie ein separates CSS für Printmedien wie dieses <link rel="stylesheet" href="print.css" type="text/css" media="print" /> und für den Textbereich das Überlaufattribut 

overflow: visible;
0
Kangkan

Bei der Verwendung von reinem CSS ist es nicht möglich, die Textfläche für den Druck vorzubereiten. 

Es ist notwendig, dem Textbereich etwas Javacript-Magie hinzuzufügen oder ein ausgeblendetes Feld hinzuzufügen.

Es gibt einige Lösungen, die hier erwähnt wurden:

  1. Versteckter Absatz oder Div 
  2. Verwenden Sie Javascript, um die Größe des Textbereichs zu vergrößern

1. Versteckter Absatz oder Div 

HTML & CSS:

<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>

<style>
  .hidden-div{display: none;}
  @media print{
    .hidden-div{display:block;}
  }
</style>

2. Javascript

Sie könnten eine js-Bibliothek verwenden, z. B. https://github.com/thomasjo/jquery-autoresize

$(function() {
    $("textarea").autoResize()
})
0

Dies ist eine einfache Korrektur mit CSS, da die meisten Benutzer sich nicht wirklich darum kümmern, etwas mehr Platz zu drucken. Legen Sie beim Drucken einfach eine Mindesthöhe für Textbereiche fest:

@media print { 
textarea {
min-height: 500px;  
}
}

Markieren Sie das am Ende Ihres CSS mit einer minimalen Höhe, die bequem genug ist, wenn Sie es in der Seitenansicht betrachten.

0
Geoff Kendall

Hinzufügen zu Alans Antwort oben, wenn Sie mehrere Instanzen dieses Problems auf derselben Seite haben, können Sie data- * -Attribute verwenden, um alle auf einmal zu behandeln. Stichprobe:

var $printOnlyArr = $('.print-only');
for (var i = 0; i < $printOnlyArr.length; i++) {
  var $printOnly = $($printOnlyArr[i]);
        var textSource = $printOnly.data('textsource');
        if (textSource) {
          $printOnly.text($("#" + textSource).val());
        }
}
.print-only {
        display: none;
}

@media print {
        .print-only {
                display: block;
        }
        .no-print {
                display: none;
        }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control no-print" maxlength="2000" id="txtAdditionalComments"></textarea>
<div class="print-only" data-textsource="txtAdditionalComments"></div>
0
Joe