jQuery Minute™

Setting focus to input fields is easy enough with JavaScript: document.getElementById(‘theInputField’).focus(); but sometimes you need a more generic solution as what happens when the next input field changes ID?

I was recently faced with the problem of setting focus to the next input field. The challenge was that I didn’t know what that field was. So given an input field, find the next logical (in the order of the DOM) input field and set focus. I came up with the following jQuery function (plugin) to accomplish this:

1
2
3
4
5
6
7
8
9
10

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

The use is as follows:

$( 'current_field_selector' ).focusNextInputField();

Let’s break this code down some:

$.fn.focusNextInputField = function() {

Start off by adding a new jQuery function/plugin

return this.each(function() {

Given a set of elements (this => jQuery object), iterate over them (we’ll return false which stop iteration after the first element.)

var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');

Walk up the DOM tree (parents) until we find either the first form element or reach the body tag. Now find all button,input,textarea and select elements.

var index = fields.index( this );

Find out if our current DOM element (this) is in the jQuery collection. Index will return -1 if it is not.

if ( index > -1 && ( index + 1 ) < fields.length ) {

See if we have a match and make sure we aren’t the last element

fields.eq( index + 1 ).focus();

Select the next input field ( index + 1 ) and set focus to it.

}
return false;

Return false so we stop iteration after this element. So if you call $(…).focusNextInputField() with multiple elements, it will only set focus to the next input field of the first element.

Good luck & enjoy!

Once again the JavaScript master is at it with “Pretty Date” to take the unfriendly “2008-01-28T20:24:17Z” and turn it into: “2 hours ago“. Worth a look as it is short and sweet!

http://ejohn.org/blog/javascript-pretty-date/

This was brought up on one of the jQuery lists a little while back. A solid implementation that is lean on code. Also worth noting is that while this uses the jQuery namespace, there isn’t anything jQuery specific. Great project!

http://code.google.com/p/jquery-aop/

Doug D started a thread on the google groups jQuery developer list about a faster trim method he ran across and how counter intuitively it was better to run two expressions rather than one. Matt Kruse then provided a link to a great article on the subject: http://blog.stevenlevithan.com/archives/faster-trim-javascript

The origional thread can be found here (I couldn’t find it at the time of the writing but I’m sure it’s there!): http://www.nabble.com/forum/Search.jtp?forum=20161&local=y&query=faster+trim