javascript - 在文本区域输入 1 个或更多字符之前，如何默认禁用提交按钮？

Question

目前，当文本区域聚焦时，它会扩展它的高度，并出现发布和取消按钮。现在我想默认禁用提交按钮，只有在输入文本区域后才激活它。

稍后我会为不活动的提交按钮添加不透明度，然后在按钮处于事件状态时将其移除，只是为了获得不错的效果。但无论如何，我已经尝试了很多方法来应用 disabled 并且它不起作用。我已经尝试了其他各种方法，例如定义点击功能以及提交，然后使用 attr() 将禁用应用到我表单的禁用属性，但它似乎没有任何效果。

HTML

        <div class="comment_container">
                    <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>

                    <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
                </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>


           </div>


                    <% end %>
                <% end %>


            <% if logged_in? %>
            <%= form_for @comment, :remote => true do |f| %>
            <%= f.hidden_field :user_id, :value => current_user.id %>
            <%= f.hidden_field :micropost_id, :value => m.id %>
            <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>

    <div class="commentButtons">         
      <%= f.submit 'Post it', :class => "commentButton" %>
   <div class="cancelButton"> Cancel </div>
    </div>   
            <% end %>

            <% end %>

JQuery:

$(".microposts").on("focus", ".comment_box", function() {
    this.rows = 7;


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

                $cancelButton.click(function() {
                    $commentBox.removeClass("comment_box_focused").addClass("comment_box");
                    $form.children(".commentButtons").removeClass("displayButtons");
                    $commentBox.val("");



                });

});

亲切的问候

Answer 1

设置 disabled 属性不起作用，因为如果存在 disabled 属性，则该字段将被禁用，而不管该属性的值如何。您可以使用 .removeAttr("disabled")，但操作 disabled property 确实最有意义，它更直观 - 它是只是一个 bool 值。

$commentButton.prop({ disabled: !$commentBox.val());

为了安全起见，绑定(bind)到onkeyup、oninput和onchange:

$commentBox.on("keyup input change", function () {
    $commentButton.prop({ disabled: !$commentBox.val() });
});

如果您需要手动启用或禁用按钮，例如在清除表单后，您可以将 true 或 false 直接传递给对 的调用。 prop().

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

---

编辑:详细分割

.prop() 方法

.prop() method获取和设置元素的属性值，类似于 .attr() 获取和设置元素的属性值的方式。

考虑这个 jQuery:

var myBtn = $("#myBtn");
myBtn.prop("disabled", true);

我们可以像这样用纯 JavaScript 重写它:

var myBtn = document.getElementById("myBtn");
myBtn.disabled = true;

为什么我们不需要if语句

我们不需要 if 语句的原因是 disabled 属性采用 bool 值。我们可以在 if 语句中放置一个 bool 表达式，然后根据结果，分配一个不同的 bool 表达式作为属性的值:

if (someValue == true) {
    myObj.someProperty = false;
}
else {
    myObj.someProperty = true;
}

第一个问题是 if 语句中的冗余:if (someValue == true) 可以缩短为 if (someValue) .其次，可以使用 logical not operator (!) 将整个 block 缩短为单个语句。 :

myObj.someProperty = !someValue;

逻辑非运算符 (!) 返回表达式的否定结果 - 即 true 表示“假”值，false 表示“真实”的值(value)观。如果您不熟悉“真实”和“虚假”值，这里有一个快速入门。任何时候您在需要 bool 值的地方使用非 bool 值时，该值都会被强制转换为 bool 值。评估为 true 的值被称为“真”，评估为 false 的值被称为“假”。

 Type     Falsey values      Truthy values ———————— —————————————————— —————————————————————— Number   0, NaN             Any other number String   ""                 Any non-empty string Object   null, undefined    Any non-null object

Since an empty string evaluates to false, we can get a boolean indicating whether there is any text in the textarea by applying ! to the value:

var isEmpty = !$commentBox.val();

或者，使用 !! 进行双重否定并有效地将字符串值强制转换为 bool 值:

var hasValue = !!$commentBox.val();

我们可以用纯 JavaScript 将上面的 jQuery 重写为更详细的形式:

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
var text = myTextBox.value;
var isEmpty = !text;
if (isEmpty) {
    myBtn.disabled = true;
}
else {
    myBtn.disabled = false;
}

或者，更短一点，更类似于原来的:

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
myBtn.disabled = !myTextBox.value;