How to autosize a textarea using Prototype?

by

Facebook does it, when you write on people’s walls, but only resizes vertically.

Horizontal resize strikes me as being a mess, due to word-wrap, long lines, and so on, but vertical resize seems to be pretty safe and nice.

None of the Facebook-using-newbies I know have ever mentioned anything about it or been confused. I’d use this as anecdotal evidence to say ‘go ahead, implement it’.

Some JavaScript code to do it, using Prototype (because that’s what I’m familiar with):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

PS: Obviously this JavaScript code is very naive and not well tested, and you probably don’t want to use it on textboxes with novels in them, but you get the general idea.

More Related Contents:

  1. CSS Textarea that expands as you type text [duplicate]
  2. JS hide function error
  3. How to read with JavaScript [closed]
  4. Get the longest text in HTML document using Jquery or javascript
  5. How to implement something like this GIF that using mouse drag and select items
  6. Javascript counting all the characters from a HTML document
  7. Set cookie and get cookie with JavaScript [duplicate]
  8. Load and execution sequence of a web page?
  9. Check if an element contains a class in JavaScript?
  10. Disabling browser print options (headers, footers, margins) from page?
  11. Is it possible to hide the cursor in a webpage using CSS or Javascript?
  12. How do you get the cursor position in a textarea?
  13. Text-overflow ellipsis on left side
  14. How to detect which one of the defined font was used in a web page?
  15. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  16. How to change CSS :root color variables in JavaScript
  17. How to change style of iframe content cross-domain?
  18. How to print HTML content on click of a button, but not the page? [duplicate]
  19. Save a pre element as PDF with CSS
  20. jQuery Validation using the class instead of the name value
  21. Center flex item in container, when surrounded by other flex items
  22. How to create checkbox inside dropdown?
  23. Javascript-Setting background image of a DIV via a function and function parameter
  24. Gaussian Blur onHover Using jQuery
  25. Placeholder for contenteditable div
  26. Setting the height of a DIV dynamically
  27. assign color to mouse cursor using CSS
  28. Center an Image vertically and horizontally using CSS
  29. Change background on button click, using CSS only? [duplicate]
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment