/** * Input Value * http://svn.latower.com/main/trunk/inputValue * * Copyright (c) 2008 Gilles Ruppert (http://latower.com) * * Version: 0.1 * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * puts a string into an input field from the related label or * user defined in the script or already present in the label * inactive & active colours can be set * when user focuses on the field, the value disappears. If the user enters a value, it stays, * else it switches back to the original value * * options are not compulsory * currently only works on text input fields * * Example: * $('input:text').inputValue({blurColor: '#666', focusColor: '#000', value:'whatever you want'}); * */ ;(function($) { $.fn.autoInputLabel = function(options) { // setup defaults var defaults = { blurColor: '#666', focusColor: '#000', value: '' }; // override defaults with user input defaults = $.extend(defaults, options); // helper functions // set up which value to use var setupValue = function(t) { // we use the value that is in the value attribute if (t.value !== '') { t.origValue = t.value; // else if the user provided a value we use that } else if (defaults.value !== '') { t.origValue = defaults.value; // else we use the label associated with it } else if ($('label[for=' + t.id + ']').length) { t.origValue = $('label[for=' + t.id + ']').text(); } else { return false; } // assign the value to the value attribute t.value = t.origValue; return true; }; // setup events var setupEvents = function(t) { var $t = $(t); $t.focus(function() { if (t.value === t.origValue) { $t.attr('value', '').css('color', defaults.focusColor); } }); $t.blur(function() { if ($t.attr('value') === '') { $t.attr('value', t.origValue).css('color', defaults.blurColor); } }); }; // constructor // setup the jQuery object this.each(function() { if (this.type === 'text') { // if we have a value we set everything up if (setupValue(this)) { $(this).css('color', defaults.blurColor); setupEvents(this); } } }); return this; }; })(jQuery);