css/javascript表单onfocus占位符文本仍然存在，在键入时消失

我只是想弄清楚如何制作一个像www.tumblr.com这样的表单。onFocus占位符保留在输入框中，但当键入开始时，占位符文本消失。通过另一个教程，我知道如何进行对焦，但我想知道他们如何保持背景文本对焦，而只在键入时更改背景文本。

他们没有使用对焦技巧来更改文本。实际上，它们将两个绝对定位的块元素分层到一个单独的相对定位的块元素中

然后，它们等待onKeyUp或类似事件，并隐藏“label”元素

如果您在Firefox中使用Firebug，那么很容易看到创建效果的节点和CSS。它看起来像这样：

HTML

<div class="input_wrapper">
    <label for="user_email">Email</label>
    <input type="text" id="user_email" name="user_email" />
</div>

您需要对这些元素进行样式设置和调整，以使它们看起来漂亮。另外，请注意，他们足够聪明，可以将标签放在第一位，这样屏幕阅读器仍然可以按正确的顺序查看内容

---

然后，您需要添加JS来添加和删除输入字段的“更改”和“键控”上的输入类，这取决于您的JavaScript库或非库决定。

对于支持它的浏览器，有一个

占位符
属性，您可以使用一行或几行JS。。。或者用“谢谢”这个词。正是我需要的答案。
.input_wrapper {
    position: relative;
}
.input_wrapper label {
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 1; /* stack below input */
}
.input_wrapper_focused label {
    /* style label for focused input */
}
.input_wrapper_notempty label {
    visibility: hidden;
}
.input_wrapper input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* stack above input */
}