contenteditable實現可編輯的HTML標籤

最近工做中遇到了一個小問題，讓我學到了新的標籤屬性——contenteditable。

我須要實現的是手機端界面，特別簡單的一個頁面，以下圖；

 

在我腦海裏第一時間想到的應該就是一個form表單而後裏面包裹着一個textarea標籤這麼簡單吧，心想着這個界面頂多用十分鐘就能搞定。

而後打開編輯器我就開始寫了，代碼以下；

<form class='textbox' action="" method="post">
　　<textarea name="" rows="10" cols="20">請寫下您的描述</textarea>
   <input type="submit" name="finish" id="finish" value="完成" />
　　<input type="button" name="cancel" id="cancel" value="取消" />
</form>

簡單寫好樣式之後就打開瀏覽器切換到手機模式下跑一下，結果一眼就發現了問題所在，textarea標籤的寬高不能自適應......我用本身所學過狹隘的知識探索並嘗試過一番以後發現......仍是百度一下吧（/(ㄒoㄒ)/~~）

搜索結果第一條就是HTML5全局contenteditable屬性，之前沒見過這個屬性就打開看了一下，居然發現比較簡單並且很好用。

contenteditable這個屬性是如此的好玩，在HTML標籤後面增長這個屬性並賦予屬性值爲true，死死的標籤竟神奇般的能夠編輯了，並且兼容性很好（IE6已經脫節因此沒作測試），後來想了想可能用到這個應該有QQ空間吧，打開看了下果真不是textarea，用的是一個div增長contenteditable的屬性實現的。

藉助着新認識的屬性和簡單的css樣式很快實現了我想要的效果，當你用的時候發現光標點擊開始編輯的時候會有邊框，而簡單的border：none並不能實現清除邊框的做用，這個時候給標籤添加一組簡單的樣式代碼就能夠了：

-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;

outline:none;

contenteditable這個新屬性就比如一把鑰匙叩開了緊閉標籤的編輯大門，之後也許像我這樣極可能就會用獲得哦，因此寫在這裏分享給你們，但願你們也都能相互學習。