我有一段HTML代码，它是一个有两个输入的表单的一部分。通过CSS，我设法使与每个输入相关联的标签位于相应的输入内，作为占位符。
现在，有了一些标准的JS（我不害怕JQuery），我想捕捉用户在输入上做的事件（即鼠标点击或键盘按下）并动态改变外观和感觉标签
我需要满足的条件是：
当用户第一次点击输入时。标签将颜色更改为浅灰色。点击后，如果用户输入了一个字符，标签就会消失，而是显示你刚刚按下的字符。
当用户第一次点击输入时。标签将颜色更改为浅灰色。点击后，如果用户点击或标签远离输入，标签会将颜色更改回原来的黑色状态。
在输入中输入几个字符后，如果用户决定删除整个字符集，方法是按退格键删除每个字符，直到没有剩下，或者用鼠标突出显示整个字符组并按下删除键，标签出现但呈浅灰色。
错误1：看来如果你点击标签就会开始变红（应该是这样）但是当你点击它时它会保持红色而不是变成黑色。但是，如果单击输入上的任何位置而不是标签上的内容，这不是错误，它可以正常工作。
错误2：如果你点击输入而不是标签，它会变红，然后如果你再次点击输入但是在标签上它会短暂变黑，然后再变红（它应该保持红色，因为我们有没有离开输入）
你可以用JS提供的任何帮助都很棒！
答案 0 :(得分：0)
好的，因为第一个bug已经解决了。这是第二个bug的解决方案。基本上，您只需要在CSS规则中添加另一个选择器。
只需将label.label-inside:active添加到label.label-clicked的CSS规则中
http://jsfiddle.net/8nBAQ/13/
因为每次单击焦点标签并且它切换到label-inside类的时间不到一秒钟，:active伪类就会在该事件期间被触发。因此，您几乎可以将与label-clicked类相同的样式应用于该伪类，并且您不会再看到任何闪烁。