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程序设计有所帮助。