Change div into textarea attribute "contenteditable"

Today, I checked the implementation effect of arrow on the lovers' home page of QQ Space. I accidentally found that the text field uses the "contenteditable" attribute, making div a textarea effect, which can easily solve the problem that the text box adapts to its height with the content. The contenteditable is a new attribute of HTML5 browser China is no inferior, so don't worry about compatibility.

CSS code:

 <style type="text/css"> body { margin:0;  padding:0; background:#f6f6f6; } .divedit { width:650px;  margin:100px auto 0; position:relative; } .textinput { min-height:60px; _height:60px;  padding:10px; font-size:12px; color:#a7a7a7; border:1px solid #d9d9d9; outline:0; background:#fff; } .texthover .textinput { border-color:#f5507a; } .texthover .arrowline { border-color:transparent transparent #f5507a transparent; } .arrowbox { width:20px;  height:20px; position:absolute; left:52px; top:-9px; } .arrow { width:0;  height:0; font-size:0; line-height:0; position:absolute; overflow:hidden; } .arrowline { top:-1px;  border-style:dashed dashed solid; border-width:5px; border-color:transparent transparent #d9d9d9 transparent; } .arrowbg { top:0;  border-style:dashed dashed solid; border-width:5px; border-color:transparent transparent #fff transparent; } </style>

SCRIPT CODE:

 <script type="text/javascript"> $(function(){ $(".divedit").hover(function(){ $(this).addClass("texthover"); 	 },function(){ $(this).removeClass("texthover"); 	 }); }); </script>

HTML code:

 <div class="divedit"> <div contenteditable="true" class="textinput">Simple love, sincere pain, a little warmth, a lot of peace, happiness~but so</ div> <span class="arrowbox"> <b class="arrow arrowline"></b> <b class="arrow arrowbg"></b> </span> </div>