Question

我问了这个问题的早期版本并学会了使用.css来改变课程。但是，我决定使用addClass和removeClass（这将使我以后的函数更容易引入）。

以下是代码，jsfiddle：

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

我想要做的就是在用户输入textarea时添加背景颜色，并在删除文本时删除颜色。我试着编写函数的开头，但无法使它工作......

如果有人知道如何做到这一点会很棒。提前谢谢！

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

您还可以尝试使用jquery .on()附加keyup事件处理程序

$(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 3

只是更短的变体，更不易读。

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

!! - 将值转换为它的布尔表示

.toogleClass(class, state) - 状态“true” - 将添加类，状态为“false” - 已删除

修剪后的空字符串''将被视为虚假处理，因此将删除该类

JSFiddle Demo

Answer 4

使用keyup事件

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

DEMO

Answer 5

您可以使用textarea bind键盘事件。

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

如何在textarea中的keyup上添加和删除CSS类？

5 个答案: