div模拟textarea以实现高度自适应(去掉默认的@ mailto)

每天积累一点点 2011-08-31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>div模拟textarea</title>

<linkrel="stylesheet"href="../css/demo.css"type="text/css"/>

<linkrel="stylesheet"href="../css/hl.css"type="text/css"/>

<style>

.test_boxp{

margin:0;

}

.test_box{

width:400px;

min-height:120px;

_height:120px;

max-height:300px;

margin-left:auto;

margin-right:auto;

padding:3px;

outline:0;

border:1pxsolid#a0b3d6;

font-size:12px;

word-wrap:break-word;

overflow-x:hidden;

overflow-y:auto;

_overflow-y:visible;

}

.test_boxa{

text-decoration:none;

color:#000;

}

.test_box:focus{

-moz-box-shadow:006pxrgba(0,100,255,.45);

-webkit-box-shadow:006pxrgba(0,100,255,.45);

box-shadow:006pxrgba(0,100,255,.45);

border-color:#34538b;

}

</style>

<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>

<scripttype="text/javascript">

$(function(){

$(".test_box").keyup(function(){$(this).html($(this).text())})

$(".aa").click(function(){alert($(".test_box").html())})

})

</script>

</head>

<body>

<divid="main">

<h1>div模拟textarea以实现高度自适应实例页面</h1>

<divid="body"class="light">

<divid="content"class="show">

<divclass="demo">

<divid="testBox"class="test_box"contenteditable="true"></div>

</div>

</div>

</div>

</div>

<inputtype="button"value="按钮"class="aa"/>

</body>

</html>

相关推荐

囧芝麻 / 0评论 2019-12-20