SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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???

  2. #2
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi someonewhois - care to throw me a few lines of code or give me a hint?

  4. #4
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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).

  5. #5
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - got it working to a degree. Here is what I am using:
    Code:
    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!

  7. #7
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    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');
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •