The Harmonious Programmer

Prototype JS - Auto-Resize Text Area

Recently needed to auto-resize or auto-grow a text area in a form (with a maximum size). Below is short a little Prototype JS version which you invoke by using:



new TextAreaResize('idOfElement');

This utility does not resize the text area smaller if an user deletes data from the text area (which is expected in most cases).



var TextAreaResize = Class.create();

TextAreaResize.prototype = {

    /*
     * PROPERTIES
    */
    
    /*
     * 
     * OPTIONS:
     * maxRows: integer (default 50)
     * The maximum number of rows to grow the text area
     * 
    */
    
    
    /*
    * INITIALIZATION - CONFIGURATION
    */
    initialize: function(element, options) {
        this.element = $(element);        
        this.options = Object.extend({maxRows: 50}, options || {} );

        Event.observe(this.element, 'keyup', this.onKeyUp.bindAsEventListener(this));
        this.onKeyUp();
    },

    /*
    * PUBLIC FUNTIONS
    */    
    onKeyUp: function() {        
        while (this.element.scrollHeight > this.element.offsetHeight && this.element.rows < this.options.maxRows) {
            if (this.element.rows < this.options.maxRows) {
                this.element.rows = this.element.rows + 1;
            }
        }
    }
};

Prototype JS - Sleep Function

11 Nov 2009
1 Response
views
Prototype

Every once in a while, you need to simulate network latency in an
application when you are doing AJAX. It's a hard thing to test unless
you actually are talking to a remote server. Yes, you could do it with
a proxy server and it's something I've done, but it's cumbersome at
best.

Here's a simple sleep() function written in prototype:

 
sleep: function(milliseconds) { 
	var start = new Date().getTime(); 
	 
	for (var i = 0; i < 1e7; i++) { 
		if ((new Date().getTime() - start) > milliseconds) { 
	 		break; 
		} 
	} 
}

Basically, we are exploiting the ability to get the current system time
in milliseconds and comparing the current time in the loop against the
time in milliseconds when we started to get a difference. This function
is not appropriate if you want an action to occur is X number of
milliseconds because this function delays execution of code due to the
loop. Use a setInterval() or setTimeout() function that is part of
Javascript to "schedule" when a method should be executed.

Prototype JS - Tab to next text element on enter

10 Nov 2009
0 Responses
views
Javascript Prototype

I'm no Prototype JS wizard but I thought I'd post this little tidbit on my blog since it stumped me for a while.

I needed to "tab" to the end field in a form when a person pressed enter in a text field. The problem was that I didn't want to manually set this up on each page and I didn't know the id of the form since it varied. This is what I came up with:



$(document.forms[0]).getInputs('text').each(function(input) {
    input.observe('keypress', function(e) {
            if (e.keyCode==13) {
                var inputs = $(document.forms[0]).getInputs('text');
                var idx = inputs.indexOf(this);
                
                if (idx == inputs.length - 1) {
                    inputs[0].select()
                } else {
                    inputs[idx + 1].focus(); // handles submit buttons
                    inputs[idx + 1].select();
                }
                return false;             
            }
        }
    );
});

Essentially this is what is going on:

Get all the "text" type form elements in the first form. We're using the DOM with some prototype goodness by using the $() selector.
For each text input, interate over it with the each() function. On each iteration, the text element is called "input".
Attach an "keypress" observer to each input and a callback function to call when a keypress ocurrs.
Now in the main callback, we're looking for an "enter" (which is key code 13).
We get all the form elements again and stash them into the variable named "inputs".
We need to figure out the next text element in the array, so we find the index of the text element in which this event was observed using indexOf(...).
Some magic goes on here so that if we're the at the last element, we loop back to the first form element.

Voila! There it is and I hope this helps somebody figure out what is going on. Feel free to rip this code apart and tell me how to make it leaner and meaner.

Prototype JS - Auto-Resize Text Area

Prototype JS - Sleep Function

Prototype JS - Tab to next text element on enter

About

Archive

Get Updates

Resources