如何保持提交按钮可见，并且在textarea的可执行的onblur

Question

我有保持形式与两个元素<div id="comment_posting_holder">标签：一个textarea框和提交按钮

。

我想有div标签（含文字区域和提交按钮），如果我点击的地方“其它”比提交按钮消失。我有下面的代码开始。因此，在从textarea的焦点离开，我可以让div标签消失。

但问题是，如果DIV消失，所以不提交按钮，这意味着我不能提交表单！我怎样才能解决这个问题？

任何建议？谢谢！

** Facebook的这是否符合它的评论。如果您在点击“发表您的评论...”领域的textarea的出现，然后它会消失在失去焦点以外，如果你按下提交按钮。

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

Answer 1

如果您希望像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;
}

Answer 2

你要什么我明白了： 点击 如果用户点击任何地方，并且被点击未提交按钮的元素，则隐藏在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();
    }
  });
});

Answer 3

当时没有工作，因为在你的代码的语法错误。除了缺少的单引号，你有什么好看的，只要它在，实际上是触发一个事件。尝试这样：

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