Как добавить и удалить класс CSS при создании ключей в текстовом поле?

Question

Я спросил более раннюю версию этого вопроса и научился использовать .css для изменения класса. Тем не менее, я решил, что лучше использовать addClass и removeClass (это облегчит последующие функции, которые я собираюсь принести).

Вот код, и jsfiddle:

$(function(){ 
    if($.trim($('.text-edit1').val()).length){ 
     $(this).addClass('active-text'); 
    }); 
}); 

Все, что я хочу сделать, это добавить цвет фона, когда пользователь в текстовое поле, и удалить цвет, когда текст будет удален. Я попытался написать начало функции, но не могу заставить ее работать ...

Было бы здорово, если бы кто-нибудь знал, как это сделать. Заранее спасибо!

Answer 1

Если вы хотите написать $(this) вы должны прикрепить событие к элементу. Похоже, вам нужно событие keyup.

$('.text-edit1').keyup(function() { 
    if ($.trim($('.text-edit1').val()).length) { 
     $(this).addClass('active-text'); 
    } else { 
     $(this).removeClass('active-text'); 
    } 
}); 

http://jsfiddle.net/gEVL9/4/

Answer 2

Используйте keyup событие

$('.text-edit1').keyup(function() { 
    if ($.trim($(this).val()).length) { 
     $(this).addClass('active-text'); 
    }else { 
     $(this).removeClass('active-text'); 
    } 
}); 

DEMO

Answer 3

Вы также можете попытаться присоединить обработчик событий keyup с JQuery .on()

$(function(){ 
    $(document).on('keyup','.text-edit1',function(){ 
     if ($.trim($('.text-edit1').val()).length) { 
     $(this).addClass('active-text'); 
     } 
     else { 
     $(this).removeClass('active-text'); 
     } 
    }); 
}); 

Try in fiddle

Answer 4

Просто немного короче вариант, менее читаемым.

$('.textarea-class').on('keyup', function (ev) { 
    $(this).toggleClass('active', !!$(this).val().trim()); 
}); 

!! - преобразует значение это булевые Представительские

.toogleClass(class, state) - состояние «истинный» - класс будет добавлен, состояние «ложь» - удалено

отделана пустой строка '' будет обрабатываться, как falsy, поэтому класс будет удален

JSFiddle Demo

Answer 5

Вы можете bind keyup event с текстовым полем.

$('.text-edit1').bind('keyup',function() { 
    if ($.trim($(this).val()).length) { 
     $(this).addClass('active-text'); 
    }else { 
     $(this).removeClass('active-text'); 
    } 
});