Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWeb Page and Site Features

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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.

re: Printing a Textarea Field and Not the Entire Page

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; i.e. class="otherclass forscreen")

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 white-space is at this CSS white-space Property page.)

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:

  1. 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".

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

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

Support Area – Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC