使用jquery隐藏/显示输入和文本区域中的标签

Question

我正在尝试让输入和文本区域标签隐藏/显示功能正常工作，但我的 Jquery 技能还不够好..:/

你可能已经看过这个一千次了，我已经阅读了有关它的页面，但仍然我一直无法弄清楚。

代码的第一部分工作正常，当元素获得焦点时，它将文本更改为较浅的颜色，并在您开始键入时消失。可能写得不是很好，但目前已经尽力了。

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

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

});

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

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

});

在这里，我希望脚本执行以下操作：如果元素失去焦点，我希望标签文本淡入，除非用户在字段中写了一些内容。我可能把 if/else 语句搞砸了，而且我还没有掌握 .val 函数。

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

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

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

}} else { 

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

});

谁能帮我解决这个问题吗？我有点放弃这个，也许应该从更基本的东西开始。

提前致谢！

问候，

Vegar Vallestad

编辑：

html 看起来像这样：

<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();
        }
    }
});