Using @media print to remove textarea tags; but preserve text 1

JFoushee · Nov 3, 2004

Not sure what's involved, but I'd like to print a form that uses textarea tags. Sometimes the text within overflows, and partial text shows up in the print-out.

I'd like the stylesheet to remove the textarea tags, yet still show all the text.

When I use

Code:

<STYLE>
  @media print {
    .hideonprint { display: none; }
  }
</STYLE>
<TEXTAREA CLASS="hideonprint">hello!</TEXTAREA>

both the textarea and its text disappear.

(I'm aware this could be 1000 times harder than it sounds)

LFI · Nov 3, 2004

'depends on your definition of hard!

This is fairly straightforward, but requires JavaScript. What you can do is to fill a span's innerHTML NEXT TO the TEXTAREA with the TEXTAREA value using the TEXTAREA's ONKEYUP event. Give the span a class that won't let it display on the screen. You already have it so the TEXTAREA won't display in print.

Code:

<html>
<head>
<style type="text/css" media="screen">
.noShow{
 display:none;
}
</style>

<style type="text/css" media="print">
.hideonprint{ 
 display: none; 
}
  }
</style>

<script>
function setSpan(obj)
{
 var span = document.getElementById(obj.name+"Span");
 span.innerHTML = obj.value;
}
</script>
</head>
<body>
<TEXTAREA CLASS="hideonprint" name='greetings' onkeyup='setSpan(this)'>hello!</TEXTAREA><SPAN id='greetingsSpan' class='noShow'>hello!</SPAN>
</body>
</html>

Note the id of the SPAN must be the name of the TEXTAREA plus "Span".

I used the ONKEYUP event because the ONCHANGE only works when the element loses focus, but a user can go to the File->Print command without the TEXTAREA losing focus, so the SPAN's innerHTML might not be updated that way. Ergo, ONKEYUP.

This worked for me in IE6. 'hope it works for you!

--Dave

JFoushee · Nov 4, 2004

Hey, thanks!

LFI · Nov 4, 2004

Ha! You're welcome! Just by coincidence, I was doing nearly the same exact thing.

'glad it helped.

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Using @media print to remove textarea tags; but preserve text 1

JFoushee

Programmer

LFI

Programmer

JFoushee

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor