Mootools: Как изменить класс CSS, если выполняются следующие условия

Question

Я хочу изменить класс меток на «labelDeactivation», если текстовая область не сфокусирована и содержит более 10 символов. Как мне это сделать? Пробовал пару решений, но не повезло :-(. Кстати, если условия не выполняются, он должен вернуться к этикетке.

<p class="label">Your review</p>
<textarea id="review" name="review"></textarea>

Answer 1

http://www.jsfiddle.net/7SmwU/

document.id("review").addEvents({
    keyup: function() {
        if (this.get("value").trim().length >= 10)
            this.getPrevious().addClass("labelDeactivated");
        else
            this.getPrevious().removeClass("labelDeactivated");
    }
});

кстати, используйте <label for='review'>your review</label> - улучшенная семантическая разметка и доступность.

Answer 2

Закончено этим решением: http://jsfiddle.net/kkgp2/

var headline = $$('.headline');
var headlineLabel = $$('.headlineLabel');
var headlineNote = $$('.headlineNote');

// Change label //
headline.addEvent('blur', function(){
    headlineNote.fade('hide');
    if (this.value.length>10) {
        headlineLabel.addClass('labelDone');
    }
    else{
        headlineLabel.removeClass('labelDone');
    };
});