textarea文本框高度自适应代码实例
textarea文本框高度自适应代码实例属于前端实例代码,有关更多实例代码大家可以查看。
默认情况下textarea文本框不能够实现高度自适应,当输入的内容超过文本框的高度的时候,就会出现滚动条。
下面通过代码实例介绍一下如何利用JavaScript实现文本框随着内容高度自适应效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #shadow,#text{ font:12px/16px Arial; width:200px; overflow:hidden; height:16px; } #shadow{ position:absolute; border-width:0px; padding:0px; visibility:hidden; } #text{resize:none;} </style> <script type="text/javascript"> window.onload=function(){ //用户看到的文本框 var text=document.getElementById("text"); //隐藏的文本框 var shadow=document.getElementById("shadow"); text.oninput=text.onpropertychange =onchange; function onchange(){ shadow.value=text.value; setHeight(); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入 setTimeout(setHeight,0); function setHeight(){ text.style.height=shadow.scrollHeight + "px"; } } }; </script> </head> <body> <textarea id="text"></textarea> <textarea id="shadow"></textarea> </body> </html>
上面的代码实现了我们的要求,下面介绍效果的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(2).var text=document.getElementById("text"),获取id属性值为text的元素对象。
(3).var shadow=document.getElementById("shadow"),获取id属性值为shadow的元素对象。
(4).text.oninput=text.onpropertychange=onchange,注册事件处理函数。
(5).function onchange(),文本框内值发生改变执行的事件处理函数。
(6).shadow.value=text.value,将显示的文本框的值赋值给隐藏的文本框。
(7).setHeight(),此函数可以设置显示的文本框的高度。
(8).setTimeout(setHeight,0),//针对IE 6/7/8的延迟, 否则有时会有一个字符的出入。
(9).function setHeight(){
text.style.height=shadow.scrollHeight + "px";
},将显示的文本框高度,设置值为隐藏文本框的scrollHeight属性值。
二.相关阅读:
(1).oninput参阅JavaScript input 事件一章节。
(2).setTimeout()参阅setTimeout()一章节。
(3).scrollHeight属性参阅scrollHeight属性一章节。
textarea文本框高度自适应代码实例,这样的场景在实际项目中还是用的比较多的,关于textarea文本框高度自适应代码实例就介绍到这了。