JS实现自适应高度表单文本框的方法
本文实例讲述了JS实现自适应高度表单文本框的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现自适应高度的表单文本框</title>
<styletype="text/css">
#shadow,#text{font:12px/16pxArial;width:200px;overflow:hidden;height:16px;}
#shadow{position:absolute;border-width:0px;padding:0px;visibility:hidden;}
#text{resize:none;}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartext=document.getElementById("text");//用户看到的文本框
varshadow=document.getElementById("shadow");//隐藏的文本框
text.oninput=//非IE的
text.onpropertychange=//IE的
onchange;
functiononchange(){
shadow.value=text.value;
setHeight();
setTimeout(setHeight,0);//针对IE6/7/8的延迟,否则有时会有一个字符的出入
functionsetHeight(){text.style.height=shadow.scrollHeight+"px";}
}
};
</script>
</head>
<body>
<textareaid="text"></textarea>
<textareaid="shadow"></textarea>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。