Imprimer lors de la textarea a débordement

Vous ne peut pas résoudre ce problème avec CSS seul.

Pourquoi Pure CSS Solutions sont Insuffisantes (avec démonstration)

Permettez-moi de vous convaincre que le réponses concernant feuilles de style d'impression et overflow: visible sont insuffisantes. Ouvrir cette page et de regarder la source. Juste ce qu'ils suggèrent, à droite? Maintenant aperçu avant impression (dans, disons, Chrome 13 sur OS X, comme moi). Notez que vous ne pouvez voir une ligne ou deux de la note lorsque vous essayez d'imprimer!

Voici l'URL de mon cas de test à nouveau: https://alanhogan.github.io/web-experiments/print_textarea.html

Solutions:

1. Un lien JavaScript qui ouvre une nouvelle fenêtre et écrit le contenu de la textarea pour l'impression. Ou:

2. Lorsque le textarea est mis à jour, copier son contenu dans un autre élément que ses cachée pour l'écran, mais affiche lors de l'impression.

3. (Si votre textarea est en lecture seule, puis une solution côté serveur est également réalisable.)

Noter que textareas de traiter différemment les espaces que pour le HTML par défaut, de sorte que vous devriez envisager d'appliquer le CSS white-space: pre-wrap; dans la nouvelle fenêtre, vous pouvez ouvrir ou de votre assistant div, respectivement. IE7 et plus ne comprennent pas pre-wrap cependant, si c'est un problème, soit de l'accepter ou d'utiliser une solution de contournement pour eux. ou faire de la fenêtre pop-up fait en texte brut, littéralement servi avec un type de média text/plain (qui nécessite probablement un composant côté serveur).

L'Impression “d'assistance” Solution (avec code + démo)

J'ai créé un démo de JavaScript technique.

Le concept de base est de copier le contenu du textarea pour une autre impression helper. Le Code qui suit.

HTML:

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

CSS (tout /non imprimé):

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

CSS (en lettres moulées):

/* 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 (avec 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>

Encore une fois, la succès JavaScript démo est à https://alanhogan.github.io/web-experiments/print_textarea_js.html.

J'ai récemment rencontré le même problème. Ma solution a été de reproduire le contenu dans les contrôles de formulaire pour l'édition et dans les divs pour l'impression.

Dans ma Tête, j'ai mis une impression de la feuille de style.

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

Dans printform.css j'ai mis la suivante

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

Pour ces zones de texte (et d'autres types de champs qui ont été à l'origine des problèmes), j'ai utilisé le code suivant

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

Lors de l'affichage sur l'écran de la ces zones de texte sont affichés et les divs la duplication de contenu est caché. Lors de l'impression de l'inverse s'applique.

Je sais que vous avez déjà choisi une réponse à cette question, mais tout en utilisant la copie de la feuille de style est une bonne idée, il n'a pas de décrire une solution spécifique. Réglage overflow:visible sur le textarea (ma première idée) n'a pas fonctionné alors j'ai fini par aller avec la solution ci-dessus. Si vous rencontrez toujours des difficultés, j'espère que cela vous aide

Cela semble fonctionner pour l'application de tous les éléments qui ont débordant de contenu:

$("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");
    }
});

C'est une solution facile avec les CSS, étant donné que la plupart des utilisateurs ne sont pas vraiment pris la peine sur l'impression d'un peu plus d'espace vide. Juste la cible d'une hauteur minimale de ces zones de texte lors de l'impression:

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

Tag que sur la fin de votre CSS avec un min-height qui est assez confortablement quand vous regardez dans l'Aperçu avant Impression.

Ajout sur Alan réponse ci-dessus, si vous avez plusieurs instances de ce problème sur la même page, vous pouvez utiliser des données* les attributs de gérer tout à la fois. Exemple:

JS:

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());
	}
}

CSS:

.print-only {
	display: none;
}

@media print {
	.print-only {
		display: block;
	}
	.no-print {
		display: none;
	}
}

HTML:

<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>