скрыть / показать метку на входе и текстовое поле с помощью jquery - PullRequest
Новая
       15

скрыть / показать метку на входе и текстовое поле с помощью jquery

0 голосов
/ 12 февраля 2012

Я пытаюсь заставить работать функцию скрытия / отображения меток ввода и текста, но мои навыки работы с 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();

});

Может кто-нибудь помочь мне с этим? Я как бы отказываюсь от этого и, наверное, должен был начать с чего-то более простого.

Заранее спасибо!

С уважением,

Вегар Валлестад

Редактировать:

HTML выглядит так: 

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

1 Ответ

0 голосов
/ 13 февраля 2012 
$("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();
        }
    }
});
...