当用户单击表单输入字段时添加和删除CSS类选择器-带有示例

Question

如果您访问http://dropbox.com/login，您将看到登录表单Email / Password，具有我想要达到的预期效果。

这是他们的HTML

<div id="email-field" class="sick-input">
<label id="email-label" for="login_email">Email</label>
<input id="login_email" type="email" name="login_email" tabindex="1" autofocus="1">
</div>

基本上，当您单击“电子邮件”输入字段时，会将类选择器添加到div的类中，例如。

<div id="email-field" class="sick-input focused">

这会更改标签文本的颜色。 然后，当您开始在输入字段中键入内容时，它会添加另一个名为“填充的”选择器，该选择器将不显示任何内容-这样一来，您只能看到所键入的内容。 并且当您删除所有已写的字符或在输入字段中单击时，它将删除那些类选择器。

我怎样才能达到这种效果？ 我假设它使用JS（除非有更简单的方法？），但是我对此一无所知，所以我真的需要有人牵着我的手，谢谢。

Answer 1

我喜欢shin的css方法，重要的是要提到他多次实现相似的类的原因是因为针对不同类型的浏览器使用不同的规则，如果您仍然想使用相同的dropbox方法，那么他们会使用jquery为此，jquery是一个JavaScript框架，您需要将其导入到网页中，而最简单的方法是使用toogle类

$("#login_email").click(function(){
   $("input").toggleClass("focused");
}); 

这是一个jsfiddle的例子，问候！

Answer 2

这是您要尝试做的吗？ 我尝试仅使用CSS使其简单

<label id="email-label" for="login_email">Email</label>
<input id="login_email" type="email" name="login_email" tabindex="1" autofocus="1" placeholder="Username" required/>
<label id="password-label" for="login_password">Password</label>
<input id="login_password" type="password" name="login_password" tabindex="1" autofocus="1" placeholder="Password" required/>

并使用此CSS ：

#login_email:focus, #login_password:focus{
    outline:none;
}

#login_email::-webkit-input-placeholder, #login_password::-webkit-input-placeholder {
    color: #999;

}
#login_email:focus::-webkit-input-placeholder, #login_password:focus::-webkit-input-placeholder {
    color: #ccc;
    -webkit-transition: color 1s;
    transition:         color 1s;
}

Answer 3

Dropbox使用称为jQuery的JavaScript框架。

它允许注册某些DOM事件的回调，并简化操作（如添加/删除类等）。

我猜他们是如何达到这种效果的：

/* Add class to parent when element is focused */
$("#email-field").focus(function (e) {
    $(this).parent().addClass("focused");
});

/* Remove class from parent when element is unfocused ('blurred') */
$("#email-field").blur(function (e) {
    $(this).parent().removeClass("focused");
});

Answer 4

HTML：

<div id="email-field" class="sick-input"><label id="email-label" for="login_email">Email</label><input autofocus="1" tabindex="1" type="email" name="login_email" id="login_email"></div>
<div id="password-field" class="sick-input"><label id="password-label" for="login_password">Password</label><input type="password" id="login_password" name="login_password" tabindex="2"></div>

剧本：

jQuery(function(){
    $('#login_email, #login_password').focus(function(event){
      $(this).parent('div').addClass('focused');  
    }).blur(function(event){
        $(this).parent('div').removeClass('focused');
    }).on('keyup keydown', function(){
      if($.trim($(this).val()) === ''){
          $(this).parent('div').removeClass('populated');
      }else{
          $(this).parent('div').addClass('populated');
      }
    });
});

JSFiddle： http : //jsfiddle.net/VwB3f/