最近工作中遇到了一個小問題，讓我學到了新的標簽屬性——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這個新屬性就好比一把鑰匙叩開了緊閉標簽的編輯大門，以后也許像我這樣很可能就會用得到哦，所以寫在這里分享給大家，希望大家也都能相互學習。