微信公众号

使div变身textarea的属性“contenteditable”

web前端 18172 11年前 (2014-01-23)

今天在QQ空间的情侣主页中查看arrow的实现效果，无意中发现文本域使用了“contenteditable”属性，使div变成了textarea效果，可以方便解决文本框随着内容自适应高度，contenteditable是HTML5的新属性，而且在IE浏览器中也毫不逊色，不用担心兼容的问题。

CSS代码：

<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代码：

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

HTML代码：

<div class="divedit">
    <div contenteditable="true" class="textinput">简单的爱，真心的疼，一点温暖，许多安宁，幸福~不过如此！</div>
    <span class="arrowbox">
        <b class="arrow arrowline"></b>
        <b class="arrow arrowbg"></b>
    </span>
</div>

分享给朋友：