Javascript 使占位符消失/出现并将光标定位在前面

我完全是JavaScript、jQuery和其他所有东西的初学者，所以当我看到HTML5支持占位符时，我很满意。也就是说，直到我想增强它的行为。我想做的是利用我在《特别是》中学到的知识，但对其进行修改，以便：

当聚焦于输入字段时，光标会自动转到占位符的开头，而您不会看到它移动。 占位符在我开始输入时消失，而不是在输入字段中输入一段时间后消失，但如果我删除在输入字段中输入的内容，占位符将重新出现。 我在Tubmlr和Square的主页上以及Foursquare的Join页面上看到了一些圆滑的实现，这些实现正是我想要做的，我希望自己能找到实现的方法

我要修改/增强的来自上述JSFIDLE的代码：

$('.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'));
    }
});

---

有人能帮我解释一下吗？

编辑-我觉得Tumblr设置了一个背景图像，其中呈现了文本请注意，文本在焦点上是不可选择的。所以只要在输入中放置一个背景图像，同时它有焦点，然后在模糊中移除它。js1568指出，他们不是这样做的。也就是说，这就是我在其他地方的实现方式。提到的标签方法看起来也更简单、更直接

$(your input selector here).focus(function(){
  $(this).css('background-image', 'url(background image with text in it.png)');
});

$(your input selector here).blur(function(){
  $(this).css('background-image', 'url(background image in different color with text in it.png');
});

当用户开始键入时，他们会更改背景图像，因此您需要在他们键入时检查输入值，以查看其是否为空-如果不是，请删除背景图像：

$(your input selector here).keypress(function(){
  if ($(this).val() != "") {
    $(this).css('background-image', '');
  }
});

---

错误的他们正在文本框下面放置一个带有文本的标签。Foursquare使用了一种类似的技术。你应该把它作为一个答案。我没有看他们是如何实现它的，但我做了一个猜测，并在其他地方做了同样的事情。事实上，除了作为标签的文本，而不是在背景图像中呈现，它几乎是一样的。它们改变背景图像的焦点和模糊，但只是改变颜色。当检测到添加到字段以隐藏标签的输入时，它们还会添加另一个类。

<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>