Style html text input size to match its contents

Question

I've asked a few other questions here about this system, so I'll try to avoid repeating a lot of detail.

The short version is that I have many html pages, each with a form that accepts input, but never saves the input anywhere- they are only ever printed out for mailing. A previously developer who had never heard of @media print did the initial work on most of them, and so he came up with some... odd solutions to hide the ugly text boxes on the printed page, usually resulting in two completely separate copies of nearly the same html. Unfortunately, that broke the back button in many cases, and so now I must go back and fix them.

---

In some cases, these html forms really are form letters, with text inputs in the middle of the text. I can style the text inputs so that the box doesn't show, but they are still the wrong size. This results in a bunch of extra ugly whitespace where it doesn't belong. How can make the inputs fit the text entered by the user?

The best I can come up with at the moment is to have a hidden <span> next to each input that is styled to show instead of the input when printing, and use javascript to keep it in sync. But this is ugly. I'm looking for something better.

Update:
Most of our users are still in IE6, but we have some IE7 and firefox out there.

Update2:
I re-thought this a little to use a label rather than a span. I'll maintain the relationship using the label's for attribute. See this question for my final code.

Answer 1

The span idea isn't that bad. With a Javascript library like jquery, a single 1-2 line Javascript function could dynamically replace all the appropriate <input> tags with <span>..</span>. You wouldn't have to enter in any of the spans yourself.

In really rough pseudo-javascript code with jquery it would be something like:

function replaceInputsOnSomeButtonClick() {
 // Find all inputs, wrap value with span tag, remove the input tag
 $("input").text().wrap("<span>").remove();
}

Answer 2

CSS doesn't have answer for this one. Inputs are "replaced elements" – a black box in CSS.

input {content:attr(value)} works only for initial value in HTML, and won't reflect any later changes.

So the best you can get is less ugly Javascript.

for(var i=0; i < form.elements.length; i++)
{
   var input = form.elements[i]; 
   if (input.type != 'text') continue;

   var span = document.createElement('span');
   input.parentNode.insertBefore(span,input);

   span.className = 'show-in-print';
   input.className = 'hide-in-print';

   input.onchange = (function(span){ // trick to preserve current value of span
      return function()
      {
         if (span.firstChild) span.removeChild(span.firstChild);
         span.appendChild(document.createTextNode(this.value));
      }
   })(span);
}