提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

Textarea根据内容自适应高度

内容 根据 高度 适应 textarea
2023-06-13 09:15:07 时间

直接看代码吧，很简单，也很实用。

复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<title>autoresizingtextarea</title>
<styletype="text/css">
textarea{
   border:0nonewhite;
   overflow:hidden;
   padding:0;
   outline:none;
   background-color:#D0D0D0;
   resize:none;
}
</style>
<scripttype="text/javascript">
varobserve;
if(window.attachEvent){
   observe=function(element,event,handler){
       element.attachEvent("on"+event,handler);
   };
}
else{
   observe=function(element,event,handler){
       element.addEventListener(event,handler,false);
   };
}
functioninit(){
   vartext=document.getElementById("text");
   functionresize(){
       text.style.height="auto";
       text.style.height=text.scrollHeight+"px";
   }
   /*0-timeouttogetthealreadychangedtext*/
   functiondelayedResize(){
       window.setTimeout(resize,0);
   }
   observe(text,"change", resize);
   observe(text,"cut",    delayedResize);
   observe(text,"paste",  delayedResize);
   observe(text,"drop",   delayedResize);
   observe(text,"keydown",delayedResize);

   text.focus();
   text.select();
   resize();
}
</script>
</head>
<bodyonload="init();">
<textareacols="40"rows="1"style="height:25px;"id="text"></textarea>
</body>
</html>


 

相关文章