Question

I’m a total beginner to JavaScript, jQuery, and everything else, so when I saw that HTML5 supports placeholder I was satisfied. That is, until I wanted to enhance its behavior. What I’m trying to do is take what I learned in this post (particularly the corresponding jsFiddle) but modifying it so that:

• When focusing on the input field, the cursor automatically goes to the beginning of the placeholder in a way that you don’t see it move.
• The placeholder disappears when I start typing (not after an amount of time) in my input field (which it does but then reappears if I delete what I typed in my input field.

I’ve seen sleek implementations that do exactly what I’m looking to do (notably from the homepages of Tubmlr and Square, and the “Join” page of Foursquare) and am hoping to find out how to do it myself.

The code from the aforementioned jsFiddle that I want to modify/enhance:

$('.placeholder').each(function(){
    $(this).data('placeholder', $(this).attr('data-title'));
    $(this).val($(this).attr('data-title'));
});

$('.placeholder').live('keydown', function(){
    if ($(this).val() == $(this).data('placeholder')) {
        $(this).val('');         
    }
});

$('.placeholder').live('blur', function(){
    if ($(this).val().trim() == '') {
        $(this).val($(this).data('placeholder'));
    }
});

Can anyone help explain this to me?

Answer 1

<style>
form div { 
 position:relative; 
}
div label { 
  position:absolute;
  top:0;
  left:0;
  color:#666;
}
div input {
  background: transparent;
}
</style>
...
<script>
$(document).ready(function() {
  $('input').keyup(function() {
    if ($(this).val().length) {
      $('label[for='+$(this).attr('name')+']').fadeOut();
    } else {
      $('label[for='+$(this).attr('name')+']').fadeIn();
    }
  });
});
</script>
...
<form>
<div>
<label for="name">Name</label>
<input id="name" name="name" />
</div>
</form>

http://jsfiddle.net/Pbn5K/4/