如何添加和刪除textarea中的keyup上的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

您可以使用textarea bind keyup事件。

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