html自动适应的textarea文本框代码举例

发布时间:2019-11-10编辑:脚本学堂
本文实现一个可以自适应的文本框效果,是学习html中文本框自适应的典型例子,供大家学习参考。

1,css代码部分
 

复制代码 代码示例:
<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>

2,js代码部分
 

复制代码 代码示例:
<script type="text/javascript">  
  window.onload = function () {
  var text = document.getElementById("text"); //用户看到的文本框
  var shadow = document.getElementById("shadow"); //隐藏的文本框
  text.oninput = //非IE的
  text.onpropertychange = //IE的
  onchange;
   
  function onchange() {
    shadow.value = text.value;
    setHeight();
    setTimeout(setHeight, 0); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入
    function setHeight() { text.style.height = shadow.scrollHeight + "px"; }
    }
};
</script>

3,文本框内容部分
 

复制代码 代码示例:
<body>
    <textarea id="text">脚本学堂,欢迎大家的光临。</textarea>
    <textarea id="shadow">脚本学堂_www.jb200.com。</textarea>
</body>