jQuery/javascript - Input fields (user,pass) just like twitter's login?

Question

How can I achieve the same effect like twitter\'s log-in form (the top on the right) - when you click on the username/pass the value \"username\" stays there until you enter tex

Answer 1

I've coded a plugin to do this, couldn't find any that use the twitter-like div default value.

See working fiddle: http://jsfiddle.net/garreh/nCCPQ/2/

---

jQuery: $.defaultText plugin

// Basic Usage:
$('input').defaultText({ text: 'Username' });

// Provide a class to use:
$('input').defaultText({ text: 'Email address', css: 'enter_email' });


$.fn.defaultText = function(options) {
    var defaults = {
        css: 'dimmed'
    };
   
    var options = $.extend({}, defaults, options);
    
    if (!('text' in options)) return this;
    
    var input = this[0],
        $input = this,
        offset = $input.offset();
       
    function hide() {
      $div.hide();
      $input.add($div).removeClass(options.css);
    };
    
    function show() {
       $div.show();
       $input.add($div).addClass(options.css);
    }
        
    function focus() {
        if (input.value.length) hide();
        else show();
    };
    
    // Create div to put placeholder text in
    var $div = $('
' + options.text + '
')
        // Position it to the same place as the input box:
        .css({ position: 'absolute',
               top: offset.top,
               left: offset.left + 4,
               cursor: 'text'
            })
        .click(function() {
            $input.focus();
            focus();
        })
        .addClass(options.css + ' unselectable')
        .appendTo('body');
    
    // Also add the class to the input box:
    $input
        .addClass(options.css)
        .keyup(focus).blur(function() {
            if (!input.value.length) show();
        });
    
    return this;
};

---

465 bytes minified, 323 gzipped:

$.fn.defaultText=function(a){function d(){c.show();b.add(c).addClass(a.css)}
function e(){f.value.length?(c.hide(),b.add(c).removeClass(a.css)):d()}
a=$.extend({},{css:"dimmed"},a);if(!("text"in a))return this;var f=this[0],
b=this,g=b.offset(),c=$("
"+a.text+"
").css({position:"absolute",
top:g.top,left:g.left+4,cursor:"text"}).click(function(){b.focus();e()})
.addClass(a.css+" unselectable").appendTo("body");b.addClass(a.css).keyup(e)
.blur(function(){f.value.length||d()});return this};