Javascript 可以在JQuery中对输入textarea的文本执行实时检测吗？

我有一个“post”按钮，当文本输入到文本区域时，它会激活（从模糊变为彩色，从禁用变为启用）

这很好，但我希望文本区域能够检测到文本区域中没有任何内容。假设我在文本区输入了“abc”。。“提交”按钮将变为活动状态，但假设我现在删除了所有文本。。该按钮仍处于活动状态。。嗯，不完全像我这样：

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

这将阻止表单在文本区域中无内容提交。问题是“提交”按钮仍然是彩色的，不会像预期的那样返回到模糊的非活动状态

这就引出了我的问题

我可以设置一些东西，一旦我集中注意力在文本区域并键入并知道何时从文本区域删除了所有内容，就可以激活并开始收听吗

通过这种方式，我可以设置一个if语句，说明文本是否全部删除，然后为彩色状态按钮设置removeClass，为模糊状态按钮设置addClass

这也应该适用于空白

这是我目前的代码：

.comment\u box=我的文本区

.activeCommentButton=彩色提交按钮

$(".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("");
    });
});

.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("");
    });
});

---

亲切问候

是尝试此操作，您可以修改它：

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

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

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

});

---

是，请尝试此操作，您可以修改它：

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

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

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

});

---

这对我来说很有效，但有没有更干净的方法

 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");
              }
                });

---

这对我来说很有效，但有没有更干净的方法

 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");
              }
                });

---

{disabled:commentBox.val（）.length==0}

你能不能处理“按键”事件，并在每次事件发生时检查

值的长度？如果可能，你能给我举个例子吗？这听起来比我现在做的要好。

{disabled:commentBox.val（）.length==0}

你能不能处理“keypress”事件，并在每次事件中检查

值的长度？如果可能的话，你能给我举个例子吗？这听起来比我现在所做的要好。你应该把它添加到你原来的帖子中，而不是把它作为答案发布。。。除非它回答了你的问题——在这种情况下，“有没有更干净的方法”也应该被删除……你的整个代码在很多层面上都是错误的。让我们从这样一个事实开始，即您可以交换CSS类，如

.activeCommentButton

和

.commentButton

，而实际上您应该只执行

addClass（“active”）

/

removeClass（“active”）

。您可以组合CSS类，如

.commentButton.active

。虽然您可能希望添加“剪切”和“粘贴”，但实际上不需要同时跟踪“keyup”和“keypress”。我认为没有“输入”事件。“keypress”在键影响元素的值后触发，因此这是您希望用于键盘操作的键。Tomalak您必须查看我的css并了解我的应用程序设置，才能理解我为什么以我的方式使用addClass/removeClass。您应该将其添加到原始帖子中，而不是将其作为答案发布。。。除非它回答了你的问题——在这种情况下，“有没有更干净的方法”也应该被删除……你的整个代码在很多层面上都是错误的。让我们从这样一个事实开始，即您可以交换CSS类，如

.activeCommentButton

和

.commentButton

，而实际上您应该只执行

addClass（“active”）

/

removeClass（“active”）

。您可以组合CSS类，如

.commentButton.active

。虽然您可能希望添加“剪切”和“粘贴”，但实际上不需要同时跟踪“keyup”和“keypress”。我认为没有“输入”事件。“keypress”在键影响元素的值后触发，因此这是您想要用于键盘操作的键。Tomalak您必须查看我的css并了解我的应用程序设置，才能理解我为什么以这种方式使用addClass/removeClass。为了更好地控制textarea的状态，使用change event就足够了，至少对我来说，到目前为止我已经尝试过了。使用change event更好地控制textarea的状态就足够了，至少对我来说，到目前为止我已经尝试过了。