CODEWITHSUNDEEP
javascriptcssforms
randyttp
randyttp

Reputation: 98

Add and remove CSS Class selectors when user clicks on forms input field - w/ example

If you go to http://dropbox.com/login You will see the login form Email/Password with the desired effect I'm trying to achieve.

Here is their 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>

Basically when you click on the Email input field, then a class selector is added to the div's class, such as.

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

Which changes the color of the label text. And then when you start typing in the input field, it adds another selector called "populated" which displays none - so that way you can only see what you are typing. And when you delete all the characters you have written, or click out of the input field, it removes those class selectors.

How can I achieve this effect? I'm assuming it uses JS (unless there is an easier approach?) but I know nothing about that, so I really need someone to hold my hand with this haha, thank you.

Upvotes: 1

Views: 1211

Answers (4)

shin
shin

Reputation: 3659

Is THIS what you are trying to do? I try to make it simple using only 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/>

and use this 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;
}

Upvotes: 1

Alexis
Alexis

Reputation: 5075

i like the css approach of shin, its important to mention that the reason that he is implementing similar clases many times is because the are different rules for differents types of browsers, if you stil want to use the same approach of dropbox, they use jquery for this purpose, jquery is a javascript framework that you should need to import into your web page and the easiest way to do what you want is with toogle class

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

here is a jsfiddle example, regards!

Upvotes: 2

Neaox
Neaox

Reputation: 1972

The 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>

The Script:

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/

Upvotes: 1

Lukas
Lukas

Reputation: 1479

Dropbox uses a JavaScript framework called jQuery.

It allows the registration of callbacks to certain DOM events and eases manipulation (like adding/removing classes etc.).

My guess how they achive this effect is to do:

/* 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");
});

Upvotes: 1

Related Questions