Question

I am trying to get a input and textarea label hide/show function to work, but my Jquery skills are not good enough..:/

You probably seen this a thousand times, and I have read page up and down about it, but still I havent been able to figure it out.

The first part of the code works fine, it changes the text to a lighter color when the element gets focus, and disappears when you start to type. It is probably not very well written, but it is to the best of my abilitys right now.

$("input, #email_text").focusin(function(){

$("label.input", this).css("color", "#f3f3f3");

});

$("input, #email_text").keypress(function(){

$("label.input", this).fadeOut("normal");

});

Here I want the script to do the following: If the element loose focus, I want the labeltext to fade back in, exept if the user have written something in the field. I probably have the if/else statement screwed up, and I have not yet got a grip on the .val function.

$("input, #email_text").focusout(function() {

if($("#email_text").val() !="") {

$("label.input", this).fadeIn("normal").css("color", "#f3f3f3");

}} else { 

("label.input", this).hide();

});

Can anyone give me a hand with this? I`m kind of giving up on this, and should probably have started with something more basic.

Thanks in advance!

Regards,

Vegar Vallestad

Edit:

The html looks like this:

<div id="email_text">
<label class="input">Please leave a message..</label>
<textarea name="message" id="email_text"><?php echo "</tex" . "tarea>"; ?>
</div>

Answer 1

$("input, #email_text").on({
    focus: function() {
        $("label.input", this).css("color", "#f3f3f3");
    },
    keyup: function() {
        $("label.input", this).fadeOut();
    },
    blur: function() {
        if($("#email_text").val() !="") {
            $("label.input", this).css("color", "#f3f3f3").fadeIn();
        } else { 
            $("label.input", this).hide();
        }
    }
});