根据事件处理程序更改的标签

Question

我有一段HTML代码，它是有两个输入的表单的一部分。通过CSS我已经设法使与每个输入相关联的标签位于相应的输入内，以充当占位符。

现在，有了一些标准的JS（我不害怕JQuery），我想捕获用户在输入上做的事情（即在一个鼠标单击或键盘按下）上并动态地改变外观和感觉标签。

JSFiddle Link

，我需要满足的条件是：

当输入的用户第一次点击。标签将颜色更改为浅灰色。点击后，如果用户输入一个字符，标签将消失，而您刚刚按下的字符会被显示。

当用户第一次点击输入。标签将颜色更改为浅灰色。点击后，如果用户点击或远离输入标签，标签会将颜色改回原来的黑色状态。

在输入几个字符后，如果用户决定通过按退格键删除每个字符直到没有剩余字符或用鼠标突出显示整组字符并按下删除键来删除整个字符集，标签出现，但是呈浅灰色。

错误1：看起来如果你点击标签，它会开始变红（因为它应该是），但是当你点击它时，它会保持红色而不是变成黑色。但是，如果在输入上的任何地方点击，而不是在标签上，这不是一个错误，它应该像它应该那样工作。

错误2：如果您单击输入但不是标签上的标签，它将变为红色，然后如果再次单击输入但在标签上它会短暂变黑，然后再次变红（它应该保持红色，因为我们还没有离开输入）

任何帮助你可以提供与JS将是伟大的！

Answer 1

好吧，因为第一个bug已经解决了。这是第二个错误的解决方案。基本上，你只需要添加另一个选择器到你的一个CSS规则。

只需添加label.label-inside:active的CSS规则label.label-clicked http://jsfiddle.net/8nBAQ/13/

因为每次你点击聚焦标签并切换到label-inside类不到一秒钟，在:active伪类中那种解雇事件。因此，几乎可以将类似于label-clicked类的样式应用于该伪类，并且不会再看到任何闪烁。