Printing a Textarea Field and Not the Entire Page
I'll show you how to print only the content of a textarea field instead of the entire web page.
The site visitor clicks a link and the content of the textarea field is queued for printing. The rest of the page does not print.
Generally, for selectively printing certain parts of a page and not others, I would use CSS Media Types.
For printing only the textarea field, I'll also use CSS Media Types. However, a textarea field has a special consideration — it may have scrollbars. When scrollbars are present, only the part normally visible will print, not the entire content of the textarea field.
Will, your instructions were simple, elegant, detailed, and superb as always. I was able to implement the code in less than 5 minutes. It works perfectly. You are a genius. Thank you.
Kingsley
To print the entire content of the textarea field, the content is copied into a div where it is then available for printing. The copying is done with JavaScript. JavaScript also initiates the printing process.
To set it up, the entire page, including the textarea field, will be made visible only to the screen, not visible to the printer.
Below the screen-visible web page, we'll add a div that is only visible to the printer, not visible to the screen. That div will contain the content of the textarea field for printing.
Printing a Textarea Field Step-by-step
There are 5 implementation steps for printing the content of a textarea field without printing the rest of the web page.
Step 1 —
Add these CSS definitions to the web page with the textarea field. The CSS definitions can be either in an external style sheet or anywhere in the source code of the web page with the textarea field to print.
<style type="text/css">
@media screen
{
.forscreen { display:block; }
.forprinting { display:none; }
}
@media print
{
.forscreen { display:none; }
.forprinting { display:block; }
}
</style>
Two classes are defined, "forscreen" and "forprinting". The classes are defined for both the screen media and the printer media.
When the web page is displayed in the browser, the definitions in the screen media will apply. When the page is being printed, the print media definitions will apply.
Step 2 —
Put all of the current body content into a div with class="forscreen"
<html> <head> <title>Testing</title> </head> <body> <div class="forscreen"> web page content </div> </body> </html>
If you already have a div that wraps all of the body content, the name of the forscreen class can be added to that div. (To specify two or more class names, separate the class names with a space;
Step 3 —
Below the current web page body content, immediately above the </body> tag, insert this div.
<div id="printing_div_id" class="forprinting" style="white-space:pre-line;"></div>
CSS style white-space:pre-line; keeps the textarea content's line breaks. It also wraps the text of long lines that would extend past the right margin.
If you prefer that the text not wrap except only at line breaks, use CSS style white-space:pre; instead. (More definitions for CSS style
Other CSS definitions may be assigned to the div. font-family:monospace; for example.
Here is an example to demonstrate positioning of the div that will contain the textarea content for printing.
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="forscreen">
web
page
content
</div>
<div id="printing_div_id" class="forprinting" style="white-space:pre-line;"></div>
</body>
</html>
Step 4 —
Add the following JavaScript immediately above the </body> tag.
<script type="text/javascript">
function PrintTextareaContent(textarea_field,printing_div) {
document.getElementById(printing_div).innerHTML = document.getElementById(textarea_field).value;
print();
}
</script>
Here is an example to demonstrate positioning.
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="forscreen">
web
page
content
</div>
<div id="printing_div_id" class="forprinting" style="white-space:pre-line;"></div>
<script type="text/javascript">
function PrintTextareaContent(textarea_field,printing_div) {
document.getElementById(printing_div).innerHTML = document.getElementById(textarea_field).value;
print();
}
</script>
</body>
</html>
Step 5 —
The last step is to publish a link to click for printing the content of the textarea field.
The link calls the JavaScript function published at the previous step 4.
The function requires two parameters:
-
The id value of the textarea field. If the textarea field does not have an id value, one needs to be assigned.
Example:
<textarea id="idtextareafield" name="whatever" rows="5" cols="30"></textarea>
In the link example further below, we'll assume the id value is "idtextareafield".
-
The id value of the div that will contain the textarea content for printing. In the link example below, we'll assume the id value is "printing_div_id".
Here is an example "print" link with assumptions as stated above for the two function parameters:
<a href="javascript:PrintTextareaContent('idtextareafield','printing_div_id')">
Print Textarea Field Content
</a>
Publish the "print" link anywhere on the web page, perhaps near the textarea field containing the content to be printed.
How the Textarea Field Printing Works
Now that the feature has been implemented for your web page, this is what happens when the site visitor does certain things.
-
When the "print" link in the content is clicked, the content of the textarea field is copied into the div to be printed. Printing then commences.
If the textarea field is updated and the "print" link clicked again, the latest content of the textarea field is copied into the div and printed.
-
If the site visitor uses the browser's Print menu item, what will print is the content of the textarea field that was last copied into the div for printing. (Nothing will print if the div for printing has not yet been updated.)
The div for printing is only updated when the "print" link in the content is clicked.
As you can see, the functionality works as expected only when the "print" link in the content is used. The "print" link will cause the current content in the textarea field to be printed.
Will Bontrager
