web-dev-qa-db-ja.com

textareaがオーバーフローしたときに印刷する

テキストがテキストボックスを超えたときにスクロールバーを使用できるテキスト領域があるフォームがあります。ユーザーは画面を印刷したいのですが、このテキストは表示されません。すべてのテキストを印刷用に表示するにはどうすればよいですか？ PDFへのリンクまたは何かを印刷する方が良いですか？

htmlprintingtextarea
39
Timothy Ruhle

あなたはcannotCSSだけでこの問題を解決します。

Pure-CSSソリューションでは不十分な理由（デモあり）

印刷スタイルシートとoverflow: visibleを含む回答では不十分であると確信させてください。開く このページ とソース。彼らが提案したとおりですよね？次に、プレビューを印刷します（たとえば、OS XではChrome 13で、私のように）。印刷しようとすると、メモが1行または2行しか表示されないことに注意してください。

テストケースのURLは次のとおりです。 https://alanhogan.github.io/web-experiments/print_textarea.html

ソリューション：

  1. 新しいウィンドウを開き、テキストエリアの内容を印刷用に書き込むJavaScriptリンク。または：

  2. Textareaが更新されたら、その内容を、画面には表示されないが印刷時に表示される別の要素にコピーします。

  3. （textareaが読み取り専用の場合、サーバー側のソリューションも実行可能です。）

textareasはデフォルトでHTMLとは異なる方法で空白を処理するため、開いている新しいウィンドウまたはヘルパーdivにCSS white-space: pre-wrap;を適用することを検討する必要があります。 IE7以前はpre-wrapを理解しません。したがって、それが問題である場合は、それを受け入れるか、回避策を使用してください。または、ポップアップウィンドウを実際にプレーンテキストにし、文字通りメディアタイプtext/plain（おそらくサーバー側コンポーネントが必要です）を提供します。

「Print Helper」ソリューション（コード+デモ付き）

私は demo1つのJavaScriptテクニックの を作成しました。

コアコンセプトは、テキストエリアのコンテンツを別の印刷ヘルパーにコピーすることです。コードが続きます。

HTML：

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

CSS（すべて/非印刷）：

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

CSS（印刷）：

/* 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（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>

繰り返しますが、successfulJavaScriptベースのデモは https://alanhogan.github.io/web-experiments/print_textarea_js.html にあります。

65
Alan H.

各テキスト領域をループして、コンテンツをホルダーに移動します

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

そして、次のCSSを使用します

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

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

私は最近、同じ問題に遭遇しました。私の解決策は、コンテンツを編集のためにフォームコントロールに複製し、印刷のためにdivに複製することでした。

私の頭には、印刷スタイルシートを入れました。

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

Printform.cssに以下を置きます

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

テキストエリア（および問題を引き起こしていた他のフィールドタイプ）には、次のコードを使用しました

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

画面に表示されると、テキストエリアが表示され、コンテンツを複製するdivは非表示になります。印刷時には反対のことが適用されます。

既にこの質問の答えを選んでいるのは知っていますが、印刷スタイルシートを使用することは良い考えですが、特定の解決策については説明していません。 textareaでoverflow：visibleを設定する（私の最初のアイデア）が機能しなかったため、上記の解決策を採用しました。それでも問題が解決しない場合は、これがお役に立てば幸いです

3
GordonM

これは、コンテンツがあふれているすべての要素に適用するために機能するようです：

$("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

最近問題を奨励してください。 Alan Hの投稿をありがとう。 Chrome=とSafariで完璧に機能します。ただし、IEとFirefoxでは、問題は最後のいくつかのページ（textareaの後のページ要素）が欠落することです。印刷（FF）、欠落ページ、および重複レイアウト（IE9）から。

この問題を解決するのに役立つ別の発見は、コントロールの高さがCSS overflow：visable stuffで動作するように言うので、textareaのrowsプロパティを正しく設定できることです。すべてのブラウザは、印刷中に行プロパティを尊重しているようです。

1
Ben G

この<link rel="stylesheet" href="print.css" type="text/css" media="print" />のような印刷メディア用に個別のCSSを定義し、テキスト領域用にオーバーフロー属性を次のように定義します

overflow: visible;
0
Kangkan

純粋なCSSを使用すると、テキストエリアを印刷用に準備することはできません。

テキスト領域にjavacriptマジックを追加するか、非表示フィールドを追加する必要があります。

ここで言及されているソリューションがいくつかあります。

  1. 非表示の段落またはdiv
  2. Javascriptを使用してtextareaのサイズを拡張する

1。非表示の段落または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

あなたはjsライブラリを使用することができます例 https://github.com/thomasjo/jquery-autoresize

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

これは、CSSを使用した簡単な修正です。ほとんどのユーザーは、余分な空白を少し印刷することをあまり気にしていないためです。印刷時にテキストエリアの最小の高さをターゲットにするだけです：

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

CSSの最後に、印刷プレビューで表示するのに十分な最小高さでタグ付けします。

0
Geoff Kendall

上記の Alan's 回答に追加すると、同じページにこの問題の複数のインスタンスがある場合、data- *属性を使用してすべてを一度に処理できます。サンプル：

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