Javascript 像Squareup.com上的输入

我正在尝试实现像上面那样的文本输入。本质上，输入中包含

。当您在其中单击时，文本会变浅，当您开始键入时，文本会消失。我以前发现了一个片段，但因为它是

position:absolute，它最终破坏了我的设计。
这就是众所周知的水印。有几个jQuery插件可用于此目的。
这里有一个解决您问题的方法。我绝对地定位label元素，然后相对地定位field元素，这使它在堆叠顺序中稍微高一点。将字段背景设置为透明，并添加一些jQuery以侦听焦点事件。砰

（编辑：哎呀，我在字段中输入内容时没有保持焦点效果）
这里有一个不使用CSS的
:


无标题文件
功能焦点（who）
{
如果（who.value==“我的标签”）
{
who.value=“”；
}
}
功能模糊我（谁）
{
如果（who.value==“”）
{
who.value=“我的标签”；
}
}
Square也在使用HTML5，并添加了输入标记

<input class=".input" placeholder="Whatever it should say prior to the click">

你不必使用标签，只需设置输入值并使用javascript onfocus来删除文本..或者当他们开始键入时，该站点使用绝对定位来实现这一点..从技术上讲，这是可行的。但是，由于某些原因，文本在您开始键入时不会消失。有没有办法解决这个问题？将可见性设置为隐藏在焦点类别中。我不确定是否只有我，但似乎有点滞后。当我开始打字时，文本会消失，但不会马上消失。这是次要的，但是如果你知道这个问题的解决方法，那就太好了。所以我最后尝试了我以前尝试过的代码片段（），它的工作原理与应该的完全一样。我固定的位置：绝对；我的设计有问题，所以没问题。非常感谢！我不确定你是否想知道这种“效应”是什么，或者你是否在追求这种特定的行为。我的一些同事使用了水印，但我不知道它们的具体行为
<input class=".input" placeholder="Whatever it should say prior to the click">

.input {
      color:#999999;
}

/* This will give you the change of color */
.input:focus {
      color:#000000;
}