如何在文本区域模糊时保持提交按钮可见和可执行

如果你想要一个像Facebook这样的实现,你需要检查是否有人在文本框中写了一些东西。

你可以看到我的答案有效 here

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;
}

我理解你想要的:
如果用户单击任意位置,而单击的元素不是“提交”按钮,则隐藏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();
    }
  });
});

由于代码中的语法错误,无法正常工作。除了缺少的单引号,只要它是在一个事件中,实际上是射击,你所拥有的看起来很好。试试这个:

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