1. No Profile Picture
    Contributing User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2004
    Rep Power

    Dynamically expanding textbox like Facebook

    have you ever heard of Facebook? just a joke. Without trying to hack their code, I'm wondering if anyone can give me a start on writing a code that would expand a text area up as I type more text so that the scrollbar ideally never appears

    My thoughts on this are:

    1. instead of onkeypress, I'd run a recurring setTimeout() when onfocus to do the analysis and set the object's .rows attribute. My experience is that is the best way to approach it and works in all browsers.

    2. I'm thinking that I could constantly compare the height of the element vs. the "scroll" height i.e. total hieght of text IN the element, if the 2nd is greater, bump it up a row. HOWEVER, I'm not familiar with the DOM enough to know this attribute and especially cross-browser.

    Thank you in advance for your help and I'll be glad to post the resulting code here.

  2. #2
  3. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Dec 2009
    Worthing, Brighton, UK
    Rep Power
    Hi Samuel

    I'm afraid this won't be a complete solution just some brief advice for what you are trying to achieve..
    I would definitely use CSS to achieve this effect rather than the Rows attribute as this will likely be different in each browser anyway.

    I would also think the the setTimeout method would be flawed and would take up much more memory than necessary. I would be tempted, although must admit I haven't tested it, to use the onkeypress method and transfer the users text to a hidden div element (with similar padding and size attributes to the relevant textarea). If this hidden div element was relative positioned with HEIGHT:auto you would then be able to grab the height of this div with javascript and apply it to the textarea.

    Hope this suggestion helps a little

    Daniel @ Broox.co.uk
    Affordable Web Design Solutions

    * If my reply was helpful please click on the "Add to Reputation" button at the top-right of my post
  4. #3
  5. Contributing User
    ASP Skiller (1500 - 1999 posts)

    Join Date
    Aug 2008
    Rep Power
    yes this way also you can do that,
    can u share that link where you find out this "expand a text area up "
    if you found this post is useful click Give Rep button (bottom side on this reply ) and agree

    Jquery Shake Effect ,
    Andriod KitKat

    Thank You,
  6. #4
  7. No Profile Picture
    Contributing User
    ASP Discoverer (100 - 499 posts)

    Join Date
    Jan 2008
    Rep Power
    i do not sure this will help or not..
    but i think these function quite similiar to the facebook's comment box tat auto expand their height once user key in their words..

    <script type="text/javascript">
    function autoExpand(event){
    if(event.keyCode == "13" || event.keyCode == "8"){
    var therows=0
    var thetext = document.getElementById("txt1").value;
    var newtext = thetext.split("\n");
    var i;
    document.getElementById("txt1").rows = therows;
    return false;
    <textarea name="comments" id="txt1" onkeyup="autoExpand(event)" size = "30" wrap="off" style="overflow:hidden"></textarea>
    Please correct me if im wrong..thanks..
    Last edited by chunzai; December 23rd, 2009 at 12:13 AM.

Similar Threads

  1. Pass value from unbound textbox to bound textbox
    By mustish1 in forum Microsoft Access Help
    Replies: 2
    Last Post: October 27th, 2006, 03:08 PM
  2. ASP.NET: Dynamically adding and accessing Controls
    By raheelm in forum .NET Development
    Replies: 2
    Last Post: August 17th, 2006, 09:37 AM
  3. How to convert my asp.net code to code behind
    By ehsanking in forum .NET Development
    Replies: 9
    Last Post: May 25th, 2005, 03:06 PM
  4. Inserting data into mdb file
    By XandarX in forum ASP Development
    Replies: 14
    Last Post: May 18th, 2005, 01:49 PM
  5. Dynamically expanding tree nodes
    By shasta in forum .NET Development
    Replies: 0
    Last Post: September 2nd, 2004, 06:52 AM

IMN logo majestic logo threadwatch logo seochat tools logo