Expanding Textbox

Discussion in 'Javascript' started by interfaced@gmail.com, Dec 3, 2005.

  1. Guest

    Is there a way to make an autosized textbox relative to the content,
    here is my attempt:
    <script type="text/javascript">
    function checkHeight(el){
    var newrows=Math.round(Form.Element.getValue(el).length/30);
    el.rows=(newrows>0) ? newrows : 1;
    }
    </script>
    <textarea style="font-size:14px;font-family:Lucida Grande, Arial,
    Helvetica, sans-serif" id="description" rows="1" cols="30"
    onkeydown="checkHeight(this);"></textarea>
    <input type="button" onclick="checkHeight($('description'))"
    value="test" />


    I just wish there was a way to get the scrollheight of the text(rather
    than the height of the textbox)
     
    , Dec 3, 2005
    #1
    1. Advertising

  2. Guest

    Here is another shot at it:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
    />
    <title>Expanding Textbox</title>
    <script src="scriptaculous/prototype.js"
    type="text/javascript"></script>
    <style type="text/css" media="screen">
    #description, #description-ghost{
    font-size:14px;
    font-family:Lucida Grande, Arial, Helvetica, sans-serif;
    width:300px;
    padding:4px;

    }
    #description-ghost{
    width:280px;
    }
    </style>

    </head>

    <body>
    <script type="text/javascript">
    function checkHeight(el){
    var ghost=$('description-ghost');
    var content=Form.Element.getValue(el);

    content = content.replace ( /\ \ /g, "&nbsp;&nbsp;" ) ;
    content = content.replace ( /\&nbsp;\ /g, "&nbsp;&nbsp;" ) ;
    ghost.innerHTML=content;
    ghost.style.display='block'

    var h=Element.getHeight(ghost);
    ghost.style.display='none'
    if(h>10) el.style.height=h+"px"

    }
    </script>
    <textarea id="description" onkeyup="checkHeight(this);"></textarea>
    <div id="description-ghost"
    style="display:none;font-size:14px;font-family:Lucida Grande, Arial,
    Helvetica, sans-serif"></div>
    </body>
    </html>

    wrote:
    > Is there a way to make an autosized textbox relative to the content,
    > here is my attempt:
    > <script type="text/javascript">
    > function checkHeight(el){
    > var newrows=Math.round(Form.Element.getValue(el).length/30);
    > el.rows=(newrows>0) ? newrows : 1;
    > }
    > </script>
    > <textarea style="font-size:14px;font-family:Lucida Grande, Arial,
    > Helvetica, sans-serif" id="description" rows="1" cols="30"
    > onkeydown="checkHeight(this);"></textarea>
    > <input type="button" onclick="checkHeight($('description'))"
    > value="test" />
    >
    >
    > I just wish there was a way to get the scrollheight of the text(rather
    > than the height of the textbox)
     
    , Dec 5, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dmitri Zakharov
    Replies:
    2
    Views:
    6,522
    Dmitry Roslyakov
    Jun 11, 2004
  2. Kevin Quigley

    Expanding a <div>

    Kevin Quigley, Dec 10, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    429
    Kevin Quigley
    Dec 10, 2003
  3. volts
    Replies:
    0
    Views:
    501
    volts
    Apr 7, 2004
  4. Madhanmohan S
    Replies:
    5
    Views:
    7,743
    Madhanmohan S
    Sep 3, 2004
  5. =?Utf-8?B?QW1pcg==?=

    Expanding Viewstate

    =?Utf-8?B?QW1pcg==?=, Dec 30, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    1,408
    =?Utf-8?B?QW1pcg==?=
    Dec 31, 2004
Loading...

Share This Page