Anyway to make an input=text wrap (multi-line)

[freakysid]

I'm figuring this probably can't be done - but no harm trying. Here is the reason why I want to do this.

I've got a web application which has about twenty forms on twenty pages. Users log into their account and go through the forms and input their information in order to submit a tender. I've provided a "print" version of the form. A link opens up the print version in a new window with some different CSS which makes the input and textarea overflow visible, hides borders on textareas and input boxes, etc. It also includes some javascript to disable all form elements so the user can't update/submit from the print view.

The only problem is that text in input boxes, which are now set for the overflow to be visible, don't wrap. The text remains all in one long line, which screws up the horizontal pagenation, making the page print horizontally across more than one page.

Has anyone got any idea if it is at all possible to, with a bit of CSS,DOM,JavaScript magic do something to prevent this and get that data in the input type="text" boxes to wrap???

[someonewhois]

Only thing I could think of would be to use JavaScript to convert all the input fields into div's. Would only take a few lines of code, and that would make it wrap like any normal text.

[freakysid]

Hi someonewhois - care to throw me a few lines of code or give me a hint?

[someonewhois]

function InputToDiv()
 {
 	inputs = document.getElementsByTagName('input');
 	for(i = 0; i < inputs.length; i++)
 	{
 		newdiv = document.createElement('div');
 		newdiv.innerHTML = inputs.item(i).value;
 		document.documentElement.replaceChild(newdiv, inputs.item(i));
 	}
 }

Untested, might not work (the replaceChild might not work, not 100% sure about that one).

[freakysid]

someonewhois - right idea, but it doesn't work. I really need a JavaScript/Dom guru to help on this one.

Can the admins move this into the JS forum please?

[freakysid]

OK - got it working to a degree. Here is what I am using:

function inputToDiv()
 {
 	inputs = document.getElementsByTagName('input');
 	for(i = 0; i < inputs.length; i++)
 	{
	    theInput = inputs[i];
 		newdiv = document.createElement('span');
 		newdiv.innerHTML = theInput.value;
 		theInput.parentNode.replaceChild(newdiv, theInput);
 	}
 }

note
theInput.parentNode.replaceChild(newdiv, theInput);
seems to work.

Here is the weirdness. It is only converting every SECOND input to a span!

[freakysid]

All fixed now. For future reference in case any one wants to do something similar. The reason why the code above was only changing every SECOND input field is because as each input node is replaced by the new span node, the nodeList is dynamically shrinking in size and thus our iterator "i" is no longer pointing to the input element we just replaced (because it is gone baby gone) and so is now pointing to the next input element in the node list. Thus, there is no need to increment "i" when looping through.

Below is my modified/final code. The function tagToSpan(tagName) now accepts an arguement as to what type of tag to look for and replace with spans. The function itself is being called from a function pageInit() which is called by the body onLoad event handler.

function tagToSpan(tagName) {

 	tagNodeList = document.getElementsByTagName(tagName);

 	for(i = 0; i < tagNodeList.length; i++) {
		theInput = tagNodeList.item(i);

        if (tagName == 'input' && theInput.type != 'text') {
			   // do nothing
		}
		else {
		   newSpan = document.createElement('span');
		   newSpan.innerHTML = theInput.value;
 		   theInput.parentNode.replaceChild(newSpan, theInput);
		   i--;
		}
 	}
 }

function initPage() {
	tagToSpan('input');
	tagToSpan('select');
	tagToSpan('textarea');
}