Div + contenteditable【h5】屬性製作的編輯框 +去掉外框+placeholder設置，設置字數

Contenteditable：

HTML中的contentEditable的屬性可以打開某些元素的可編輯狀態．也許你沒用過contentEditable屬性．甚至從未聽說過．contentEditable的作用相當神奇．可以讓div或整個網頁，以及span等等元素設置爲可寫。我們最常用的輸入文本內容便是input與textarea，使用contentEditable屬性後，可以在div,table,p,span,body,等等很多元素中輸入內容．
如果想要整個網頁可編輯，請在body標籤內設置contentEditable
contentEditable已在html5標準中得到有效的支持。
在IE8下設置表格可寫不支持，其他元素沒有問題。在Firefox運行一切正常。谷歌瀏覽器運行一切正常。

1.製作一個可編輯的Div,即加上contenteditable="true"

<div class="title" contenteditable="true"></div>

2.div如何實現Placeholder

 <div class="title" contenteditable="true" id="addtitle" placeholder="添加頭腦風暴標題" style="overflow-scroll;">

.title[placeholder]:empty:focus::before{
  content:none;
}
.addtitle :empty:before{
  content:attr(placeholder);
  color:rgb(190, 198, 214);
  margin-left: 5%
}

3.去掉外邊框

.title:focus{

  border:none;outline:none;

}

4.設置字數

window.onload=function(){
  var oDiv = document.getElementById("editer")
  oDiv.onkeyup=function(){
    if(oDiv.innerText.length>10){
      this.innerText = this.innerText.substring(0,10);
      this.blur();
    }
  }
}