0

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

这工作正常，但我希望文本区域检测文本区域中什么时候没有。因此，假设我在文本区域中键入了“abc”。提交按钮将变为活动状态，但假设我现在删除了所有文本。按钮仍处于活动状态。。还没有完全，因为我有这个：

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

这会阻止表单在 textarea 中不提交任何内容。问题是提交按钮仍然是彩色的，并且没有像预期的那样返回到模糊的非活动状态。

所以这让我想到了我的问题..

我是否可以设置一些东西，一旦我专注于文本区域并输入并知道我何时从文本区域中删除了所有内容，它就会激活并开始收听？

这样，我可以设置一个 if 语句来说明是否所有文本都被删除，然后 removeClass 用于彩色状态按钮，addClass 用于模糊状态按钮。

这也应该适用于空白。

这是我当前的代码：

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

亲切的问候

4

2 回答 2

3

是的，试试这个，你可以修改它：

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

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

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

});
于 2012-04-15T12:39:11.667 回答
0

这对我有用，但有更清洁的方法吗？

 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");
              }
                });
于 2012-04-15T12:40:54.473 回答