3

現在、テキスト領域にフォーカスがあると、その高さが拡張され、投稿とキャンセルボタンが表示されます。ここで、送信ボタンをデフォルトで無効にし、テキスト領域が入力された後にのみアクティブにします。

後で、非アクティブな送信ボタンに不透明度を追加し、ボタンがアクティブになったらそれを取り除いて、効果を高めます。しかし、とにかく私は多くの方法で無効化を適用しようとしましたが、それは機能しません。クリック関数を定義したり、送信してから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("");



                });

});

敬具

4

5 に答える 5

5

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)。次に、論理否定演算子 ( !)を使用して、ブロック全体を 1 つのステートメントに短縮できます。

myObj.someProperty = !someValue;

論理否定演算子 ( !) は、式の否定された結果を返します。つまりtrue、「偽の」値とfalse「真の」値の場合です。「真実」と「偽り」の値に慣れていない場合は、ここに簡単な入門書があります。ブール値が期待される場所でブール値以外の値を使用すると、値は強制的にブール値になります。評価される値はtrue「真」であると呼ばれ、評価される値は「偽」でfalseあると言われます。

タイプ 偽値 真値
 ———————— —————————————————— ——————————————————————
 数値 0、NaN その他の数値
 文字列 "" 空でない任意の文字列
 オブジェクト null、未定義 null 以外のオブジェクト

!空の文字列は false と評価されるため、値に適用することでテキストエリアにテキストがあるかどうかを示すブール値を取得できます。

var isEmpty = !$commentBox.val();

または、!!二重否定を行い、文字列値をブール値に効果的に強制するために使用します。

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

上記の jQuery をプレーンな JavaScript のより冗長な形式に書き直すことができます。

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;
于 2012-04-14T16:56:32.237 に答える
2

あなたはこれを試すことができます：

var submit = $("input[type=submit]");
submit.attr("disabled","disabled");

$('textarea.comment_box').keyup(function() {
    if ( !$(this).val() ) {
       submit.attr("disabled","disabled");
    } else {
       submit.removeAttr("disabled");
    }
});

これを試すことができるように、JS Fiddleを次に示します：http：//jsfiddle.net/leniel/a2BND/

于 2012-04-14T16:44:20.700 に答える
1

最初に送信ボタンを無効にし、テキストエリアに値がある場合は有効にすることができます:

<form id="yourForm">
<textarea id="ta"></textarea>
<input id="submit" type="submit" disabled="disabled">    
<form> 

$("#yourForm").change(function() {

  if ( $("#ta").val().length >= 1) {

    $("#submit").removeAttr("disabled"); 
  }

  else {

    $("input").attr("disabled", "disabled");

  }              

});

http://jsfiddle.net/dY8Bg/2/

于 2012-04-14T16:52:38.440 に答える
0

これを既存のコードに追加して、私が望んでいたことを達成しました。最も役に立った回答を勝利の回答としてマークし、他の回答をマークアップしました。

commentButton = form.children(".commentButtons").children(".commentButton");

       commentButton.attr("disabled","disabled");

        commentBox.keyup(function() {
            if ( !$(this).val() ) {
               commentButton.attr("disabled","disabled");
            } else {
               commentButton.removeAttr("disabled");
            }
        });
于 2012-04-14T19:37:18.213 に答える
0

テキストエリアのキーアップイベントを使用して、このタスクを達成できます。以下のサンプルコンセプトコード。

$("#textareaid").on('keyup', function (e) {
     Count_Chars(this);
});

function Count_Chars(obj) {
    var len = obj.value.length;
    if (len >= 1) {
        // do task
        // enable post button
    }
}

</p>

于 2012-04-14T16:51:44.747 に答える