如何在默认情况下禁用提交按钮,直到文本区域中键入1个字符或更多字符为止？

Question

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

稍后,我将向不活动的提交按钮添加不透明度,然后在按钮处于活动状态时将其移除以获得良好的效果.但无论如何,我尝试过多种方式应用残疾,但它不起作用.我已经尝试了各种其他的东西,比如定义一个click函数以及提交然后使用attr()将disabled禁用到我的表单的disabled属性,它似乎没有任何效果.

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 属性更有意义,这更直观 - 它只是一个布尔值.

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

为了安全起见,结合onkeyup,oninput和onchange:

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

如果您需要手动启用或禁用该按钮,例如清除表单后,您可以直接true或false直接致电.prop().

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

编辑:详细分类

该.prop()方法

该.prop()方法获取并设置元素的属性值,类似于.attr()获取和设置元素上的属性值的方式.

考虑到这个jQuery:

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

我们可以用这样的简单JavaScript重写它:

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

为什么我们不需要if陈述

我们不需要if语句的原因是该disabled属性采用布尔值.我们可以在一个if语句中放置一个布尔表达式,然后根据结果,指定一个不同的布尔表达式作为属性的值:

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

第一个问题是if声明中的冗余: if (someValue == true)可以缩短为if (someValue).其次,可以使用逻辑非运算符(!)将整个块缩短为单个语句:

myObj.someProperty = !someValue;

逻辑not运算符(!)返回表达式的否定结果 - 即true"falsey"值和false"truthy"值.如果你不熟悉"truthy"和"falsey"值,这里有一个快速入门.每次使用非布尔值时,如果需要布尔值,则将该值强制转换为布尔值.评估为的值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

由于空字符串的计算结果为false,我们可以通过应用!值来获取一个布尔值,指示textarea中是否有任何文本:

var isEmpty = !$commentBox.val();

或者,使用!!双重否定并有效地将字符串值强制为布尔值:

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;