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文本框高度自适应代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容