0

<div id="comment_posting_holder">テキストエリアボックスと送信ボタンの 2 つの要素を持つフォームを保持するタグがあります。

送信ボタン以外のどこか「その他」をクリックすると、divタグ(テキストエリアと送信ボタンを含む)が消えます。以下のコードの開始があります。したがって、テキストエリアからフォーカスを離れると、div タグを非表示にすることができます。

問題は、div が消えると送信ボタンも消えてしまい、フォームを送信できないことです! どうすればこれを修正できますか?

助言がありますか？ありがとうございました！

**Facebook はコメントでこれを行います。「コメントを投稿...」フィールドをクリックすると、テキストエリアが表示され、送信ボタンを押した場合を除き、フォーカスが失われるとテキストエリアが消えます。

$('textarea').blur(function() {
     $('#comment_posting_holder').hide();
});
4

3 に答える 3

3

Facebook のような実装が必要な場合は、誰かがテキスト ボックスに何かを書いたかどうかを確認する必要があります。

ここで私の答えが機能しているのを見ることができます

HTML

<div>
   <textarea class="comment_empty">Write a comment</textarea><br />
   <input type="submit" id="submit" value="Submit" style="display: none" />
</div>

jQuery

$(document).ready(function(){
    var submit = $("#submit");

    $("textarea").blur(function() {
        if ($(this).val() == "") {
            $(this).val("Write a comment")
                   .removeClass("comment_filled")
                   .addClass("comment_empty");
            submit.hide();
        }
    }).focus(function() {
        if ($(this).val() == "Write a comment") {
            $(this).val("")
                   .removeClass("comment_empty")
                   .addClass("comment_filled");
            submit.show();
        }
    });
});

いくつかのCSS

.comment_empty {
   color: gray;
   height: 30px;
}

.comment_filled {
   color: black;
   height: 100px;
}
于 2010-05-12T04:46:45.207 に答える
3

私が理解していること:
ユーザーがどこかをクリックし、クリックされた要素が送信ボタンではなかった場合は、div を非表示にします。

それを行うコード：

$(document).ready(function() {
  $(document).click(function(event) {
    if (event.target.id == "idOfSubmitButton") {
      //user clicked the submit button (make sure to give it an ID)
      //if you wanted to be really hardcore, you could submit the form here via AJAX
    }
    else {
      //user clicked anywhere on the page but the submit button
      //here you'd want to check and make sure someone has actually typed
      //something in the textarea, otherwise this will happen for every
      //click on a hyperlink, button, image, et cetera on the page
      $('#comment_posting_holder').hide();
    }
  });
});
于 2010-05-12T04:49:01.813 に答える
1

コードの構文エラーのため、Was が機能していません。一重引用符がないことを除けば、実際に発火しているイベントにある限り、見栄えがします。これを試して：

$(document).ready(function(){
    $('textarea').blur(function() {
        $('#comment_posting_holder').hide();
    });
});
于 2010-05-12T03:50:40.630 に答える