Можно ли выполнить оперативное обнаружение текста, набранного в textarea в JQuery?

Question

У меня есть кнопка "сообщение", которая активируется (переход от размытого к цветному и от отключенного к включенному), когда текст вводится в текстовую область.

Это работает нормально, но я хотел бы, чтобы текстовая область обнаруживала, когда в текстовой области ничего нет. Допустим, я набрал "abc" в текстовой области... кнопка отправки стала бы активной, но, скажем, теперь я удаляю весь текст.. Кнопка все еще активна... ну, не полностью, поскольку у меня есть это:

commentButton.prop({ disabled: commentBox.val() == 0 });

Который не дает форме ничего отправлять в текстовой области. Проблема в том, что кнопка отправки все еще в цвете и не возвращается в размытое неактивное состояние, как и ожидалось.

Так что это подводит меня к моему вопросу..

Могу ли я настроить что-то, что будет активировать и начать прослушивание, как только я сфокусируюсь в текстовой области, напечатаю и узнаю, когда я удалил все из текстовой области?

Таким образом, я могу настроить оператор if, чтобы сказать, что весь текст удален, затем удалить класс для кнопки цветного состояния и добавить класс для кнопки размытого состояния.

Это также относится и к пробелам.

Вот мой текущий код:

.comment_box = моя текстовая область

.activeCommentButton = цветная кнопка отправки

.commentButton = размытая кнопка отправки

$(".microposts").off().on("focus", ".comment_box", function () {
    $(this).prop("rows", 7);
    $(this).parent().find(".activeCommentButton").removeClass("activeCommentButton").addClass("commentButton");
    var commentBox = $(this),
        form = $(this).parent(),
        cancelButton = form.children(".commentButtons").children(".cancelButton"),
        commentButton = form.children(".commentButtons").children(".commentButton");
    $(this).removeClass("comment_box").addClass("comment_box_focused").autoResize();
    form.children(".commentButtons").addClass("displayButtons");
    commentButton.prop({
        disabled: true
    });
    commentBox.off().on("keyup keypress input change", function () {
        commentButton.prop({
            disabled: commentBox.val() == 0
        });
        commentButton.removeClass("commentButton").addClass("activeCommentButton");
    });
    cancelButton.click(function () {
        commentBox.removeClass("comment_box_focused").addClass("comment_box");
        form.children(".commentButtons").removeClass("displayButtons");
        commentBox.val("");
    });
});

С уважением

Answer 1

Да попробуйте это, вы можете изменить это:

$(".commentButton").prop({ disabled: true });

$(".comment_box").keypress(function() {

    $(".commentButton").prop({ disabled: !$(this).val().length >= 1 })           

});

Answer 2

Это сработало для меня, но есть ли более чистый способ?

 commentButton.prop({ disabled: true });

                commentBox.off().on("keyup keypress input change", function () {
                  commentButton.prop({ disabled: commentBox.val().length == 0 });
                  if ( commentBox.val().length > 1 ) {
                  commentButton.removeClass("commentButton").addClass("activeCommentButton");
              } else {
                commentButton.removeClass("activeCommentButton").addClass("commentButton");
              }
                });