Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    textfield to textarea

    Hi all.

    I have a textfield on my form problem. My boss wants it as a textfield to keep the field small on the page but still wants to be able to read all of the information that is in the field. What can I do with this?? Can we have change to textarea when he hovers to clicks in it. Any help would be appreciated.

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    You could use some logic like this (obviously it could be written much nicer with style, javascript and html separated, but I'll leave that up to you):
    Code:
    <textarea style="height:20px" onfocus="this.style.height='100px'"  onblur="this.style.height='20px'"></textarea>

  • Users who have thanked ironboy for this post:

    nikko50 (09-26-2011)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    A textfield can only contain a single line of text.

    This may be of use:-

    Code:
    <input name = "txt1" size = "10" onkeyup="var t2=this.value.length; if(t2< 10){this.size=10;return;} if(t2>80){ this.size=80;return;} this.size=t2;" />
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 09-26-2011 at 05:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    nikko50 (09-26-2011)

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    74
    Thanks
    3
    Thanked 3 Times in 3 Posts
    The easiest way to solve this is with CSS:

    <style type="text/css">
    Code:
    .mytxtarea
    {
    	border:1px solid black;
    	height:25px;
    	width:100px;
    }
    
    .mytxtarea:hover
    {
    	height:300px;
    }
    Code:
    <textarea id="mytxtarea" class="mytxtarea"></textarea>
    Sounds like your boss is kind of a jerk.

  • Users who have thanked Raphael for this post:

    nikko50 (09-26-2011)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Raphael View Post
    The easiest way to solve this is with CSS:
    It is important to specify standards-compliant mode using
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    if :hover is to work on non-anchor elements in Internet Explorer.
    Last edited by Philip M; 09-26-2011 at 06:30 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    I tried the below textfield with a value included.How do I get the value to wrap once it changes to a textarea??

    Code:
    Project Notes:<br>
           <input type    ="text" 
                  value   ="this is a test for this new texfield to textarea provided by the guys at codingforums.com" 
                  onfocus ="this.style.height='100px'"  
                  onblur  ="this.style.height='20px'" 
                  name    ="notes" 
                  class   ="textfield" 
                  size    ="50">

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    I don't think you can change a text field into a text area. And a text field may contain only one line of text.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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