Jquery/javascript - Input Fields (user,pass) Just Like Twitter's Login?

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 text? Als

Solution 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();
       
    functionhide() {
      $div.hide();
      $input.add($div).removeClass(options.css);
    };
    
    functionshow() {
       $div.show();
       $input.add($div).addClass(options.css);
    }
        
    functionfocus() {
        if (input.value.length) hide();
        else show();
    };
    
    // Create div to put placeholder text invar$div = $('<div>' + options.text + '</div>')
        // 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){functiond(){c.show();b.add(c).addClass(a.css)}
functione(){f.value.length?(c.hide(),b.add(c).removeClass(a.css)):d()}
a=$.extend({},{css:"dimmed"},a);if(!("text"in a))returnthis;var f=this[0],
b=this,g=b.offset(),c=$("<div>"+a.text+"</div>").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()});returnthis};

Solution 2:

You could use the answer for Delete default value of an input text on click or if you fancy some HTML5 forms there is now native support for this functionality; it is called the placeholder-attribute.

Twitter actually uses a '' inside a <div> wrapper and JavaScript to achieve this affect.

<div class="holding username">
    <inputtype="text"id="username"value=""name="session[username_or_email]"title="Username or email"autocomplete="on"><spanclass="holder">Username</span></div>

Solution 3:

HTML:

<inputtype="text" title="User Name" value="User Name"class="username">

jQuery:

$('input.username')
.focus(function(){
  var $this = $(this);
  if ($this.val() == $this.attr('title')) {
    $this.val('').removeClass('dimmed');
  }
})
.blur(function(){
  var $this = $(this);
  if ($this.val().length == 0){
    $this.val($this.attr('title')).addClass('dimmed');
  }
});

CSS:

input.username {
  color: #000;
}
input.username.dimmed {
  color: #888;
}

Solution 4:

here is a novel and easy idea for simple log in forms, until the html5 "placeholder" is better supported: We all know you cant change password fields to text, so showing default text is tricky, or you need another hidden input box.

Why not use a background image?? On focus set to none, and then on blur, if the value is empty, put it back. Very easy and well supported. The only drawback is that your default text is not text, but an image. I can't think of anything that this would effect negatively, as far as usability.

Solution 5:

Thanks Garry. To eliminate the time lag in between user's typing and fading of default text, you can replace the focus function given above with following function

function focus() {
        if ($(this).val()) hide();
        else show();
    };

It eliminates the time lag.........