类似qq空间发表说说文本框js

<div id="shang">

<div class="input-group">

//文本域

<textarea
style="resize: none; width: 446px; height: 80px; margin-top: 20px;"
class="form-control" name="message" id="message" rows="3"

placeholder="">

</textarea>

</div>

<div id="fbtn">
<button class="btn btn-primary " type="submit" id="fbbtn">
<i class="fa fa-check"></i>&nbsp;发表
</button>
</div>

</div>

首先我們需要放一個文本域，然後點擊文本域顯示發表按鈕以及一些操作。

我這比較簡單只放了文本域和按鈕沒有進行其他操作

$(function(){

//點擊文本框事件

$("#fabiao textarea").val("说点什么吧");
$("#fabiao textarea").click(function(){
$("#fabiao textarea").val("");

//顯示發表按鈕
$("#fbtn").show();
});

//排除文本域和發表按鈕所在的div。也就是點擊所在div以外的區域

         $(document).on("click",function(e)
    {
        if($(e.target).parents("#shang").length == 0)
        {
            $("#fbtn").hide(); //隱藏發表按鈕
        $("#fabiao textarea").val("说点什么吧");
        }
});
});

})