Question

如果您转到http://dropbox.com/login您将看到登录表单电子邮件/密码，并且我想要实现所需的效果。

这是他们的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">

更改标签文字的颜色。然后当你开始输入输入字段时，它会添加另一个名为＆＃34;填充＆＃34;的选择器。没有显示 - 所以你只能看到你在键入的内容。当您删除所有已写入的字符或单击输入字段时，它会删除这些类选择器。

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

Answer 1

我喜欢shin的css方法，重要的是要提到他多次实现类似的clases的原因是因为对于不同类型的浏览器是不同的规则，如果你想要使用相同的dropbox方法，他们为此目的使用jquery，jquery是一个javascript框架，您需要将其导入到您的网页中，并且使用toogle类进行所需操作的最简单方法

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

here是一个jsfiddle示例，问候！

Answer 2

THIS你想做什么？我尝试仅使用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/

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

4 个答案: