Monday, March 28, 2011

Prototype plugin for dynamically expanding textarea

Does anyone know of a good plugin for prototype which allows textareas to automatically expand / contract based on how much text there is in them (e.g. a line is added the area gets bigger, a line is removed it gets smaller)?

I need one thats free to use (e.g. some form of GPL type license).

From stackoverflow
  • It's not a plugin, but it's not long: http://www.codelibary.com/JavaScript/Auto%20textarea%20resize.html.

    EDIT: found this SO thread

    ddaa : Your codelibrary link appears broken.
  • This uses Prototype:

    <textarea id='t1' cols="40" rows="7" style='overflow:hidden;font-size:14px;font-family:"Times New Roman", Times, serif'></textarea>
    <script type="text/javascript">
    function activateResize(element) {
        Event.observe(element, 'keyup', function() {
          updateSize(element)
        });
        updateSize(element)
    }
    
    function updateSize(element) {
       //if scrollbars appear, make it bigger, unless it's bigger then the user's browser area.
        if(Element.getHeight(element)<$(element).scrollHeight&&Element.getHeight(element)<document.viewport.getHeight()) {
         $(element).style.height = $(element).getHeight()+15+'px'
         if(Element.getHeight(element)<$(element).scrollHeight) {
          window.setTimeout("updateSize('"+element+"')",5)
         }  
        }
    }
    
    activateResize('t1')
    </script>
    
    : I based the code I used on this, thanks.

0 comments:

Post a Comment