CSS TextArea Print

I would like to set up a css for printing of my forms.  However my forms contain a lot of different sized textareas.  I would like the entire contents of each textarea to be printed.  How can this be done without sending the contents off to another dedicated page?  Can it be done using css at all or should I use Javascript to resize each of the boxes?
k2consultingAsked:
Who is Participating?
 
GrandSchtroumpfCommented:
Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">

div.Printable div {
  display: none;
}

@media print {

  div.Printable textarea {
    display: none;
  }
  div.Printable div {
    display: block;
  }

}

</style>
<script type="text/javascript">

function copyTextAreaContent(source) {

  var text = source.value;
  text = text.replace('<', '&lt;');
  text = text.replace('>', '&gt;');
  source.nextSibling.innerHTML = text;

}

</script>
</head>
<body>

  <div class="Printable">
    <textarea onchange="copyTextAreaContent(this)">Lorem ipsum</textarea><div>Lorem ipsum</div>
  </div>

</body>
</html>
0
 
GrandSchtroumpfCommented:
You can use javascript to transfer the content of your textarea into a block-level element that is hidden on screen media.
Then use CSS to hide the textarea and show the block element on printed media.
0
 
k2consultingAuthor Commented:
How would this be done?
0
 
k2consultingAuthor Commented:
OK I will give this a try.
0
 
MrRioCommented:
Good solution. :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.