BUG: Internet Explorer Only Prints First Page of Large TEXTAREA

View products that this article applies to.

This article was previously published under Q294901

Symptoms

When you print a TEXTAREA element that is larger than a single page, Internet Explorer only prints the first page of the TEXTAREA.

↑ Back to the top

Resolution

To work around this problem, hide the TEXTAREA element, and copy the contents of each TEXTAREA in a newly created DIV element during the onBeforePrint event. After you print the page, remove the DIV element during the onAfterPrint event, and the TEXTAREA becomes visible again. See the "More Information" section for a code sample that demonstrates this workaround.

↑ Back to the top

Status

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

↑ Back to the top

More information

The following code illustrates how to reproduce this problem:

<HTML>
<HEAD>
<TITLE>Repro for TEXTAREA not being printed</TITLE>
</HEAD>
<BODY onload="fill_area()">

<script language=javascript>
  function fill_area()
  {
  
    for(i = 0; i < 250; i++) 
    {  
      mytextarea.value = mytextarea.value + "This is the generated text for the textarea\n";
    }
  }
</script>
<textarea id=mytextarea cols=70 rows=253></textarea>

</BODY>
</HTML>

In the actual results, only one page appears in preview, and only one page is printed. In the expected results, several pages should appear in preview, and all of the pages should print.

Workaround

The following code illustrates how to hide the TEXTAREA elements and replace them with DIV elements that contain the contents of the initial TEXTAREA elements:

<HTML>
<HEAD>
	<TITLE>IE 5.5 TEXTAREA Cropping Workaround</TITLE>
</HEAD>

<BODY onload="fillAreas();" onbeforeprint="subInDivs();" onafterprint="putBackTextAreas();">

<SCRIPT LANGUAGE="JScript">
   
function subInDivs() 
{   
   var collTextAreas = document.all.tags("TEXTAREA");
   var oNewDiv;
   var sTemp;
   var i;

   for (i = 0; i < collTextAreas.length; i++) 
   {
      oNewDiv = document.createElement("DIV");
      oNewDiv.style.width = collTextAreas(i).clientWidth;
      oNewDiv.style.height = collTextAreas(i).clientHeight;
      oNewDiv.style.border = "1px solid black";
      oNewDiv.id = collTextAreas(i).uniqueID + "_div";

      // Replace all line breaks with HTML line breaks.
      sTemp = collTextAreas(i).value.replace(/\n/gi,"<BR>"); 

      // Match two spaces with two non-breaking spaces.
      sTemp = sTemp.replace(/\s\s/gi,"&#xa0;&#xa0;"); 

      oNewDiv.innerHTML = sTemp;      
      collTextAreas(i).parentNode.insertBefore(oNewDiv, collTextAreas(i));
      collTextAreas(i).style.display = "none";
      oNewDiv = null;
   }
}

function putBackTextAreas()
{
   var collTextAreas = document.all.tags("TEXTAREA");
   var oDivToRemove;
   var i;

   for (i = 0; i < collTextAreas.length; i++) 
   {
      oDivToRemove = document.all(collTextAreas(i).uniqueID + "_div");
      if (oDivToRemove != null)
      {
         oDivToRemove.removeNode(true);
      }
      collTextAreas(i).style.display = "";
   }

}

function fillAreas() 
{
   var sTempLine = "";
   var collTextAreas;
   var i;

   for(i = 0; i < 250; i++)
   {
      //Build string.
      sTempLine += "Name: Superwolf, Test number: " + i + ", data: XX XXX X XXX  XX\n";
   }

   collTextAreas = document.all.tags("TEXTAREA");
   for (i = 0; i < collTextAreas.length; i++)
   {
      collTextAreas(i).value = sTempLine;
   }
}

</SCRIPT>

<H2>IE 5.5 TEXTAREA Cropping Workaround</H2>

<TEXTAREA ID="ta1" ROWS="253" COLS="70"></TEXTAREA>

</BODY>
</HTML>

↑ Back to the top