Javascript 实现 Textarea 自动伸缩，兼容IE6、IE7、IE8、IE9、Firefox、Safari、Chome、Opera

作者：孟宪会阅读：1210 发表于：2011-09-05 10:30:11

Javascript 实现 Textarea 自动伸缩的几种方法：

XML/XHTML 代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

  <title>Javascript 实现 Textarea 自动伸缩，兼容IE6、IE7、IE8、IE9、Firefox、Safari、Chome、Opera</title>

  <style type="text/css">

  textarea{padding-top:0;padding-bottom:0;overflow: hidden;}

  </style>

</head>

<body>

<table>

  <tr valign="top">

  <td>方法1：支持拷贝粘贴、删除操作<br /><textarea id="textarea1" onkeyup="AutoExpand(this)" onfocus="AutoExpand(this)"></textarea></td>

  <td>方法2：只支持输入<br /><textarea id="textarea"></textarea></td>

  <td>方法3：只支持输入<br /><textarea onpropertychange="MaxMe(this)" oninput="MaxMe(this)" ontextinput="MaxMe(this)"></textarea></td>

  </tr>

</table>

<script type="text/javascript">

  var InitHeight = 20;

  function AutoExpand(e) {

    var HideTextarea = document.getElementById("__hidetextarea");

    if (!HideTextarea) {

      HideTextarea = document.createElement("textarea");

      HideTextarea.id = "__hidetextarea";

      HideTextarea.style.borderWidth = 0;

      document.body.appendChild(HideTextarea);

    }

    HideTextarea.value = e.value;

    HideTextarea.style.height = "0px";

    HideTextarea.style.overflow = "hidden";

    var x = HideTextarea.scrollHeight + "必须先计算下scrollHeight的值，否则，scrollHeight 的值将固定？";

    delete x;

    e.style.height = Math.max(Math.max(InitHeight,20), HideTextarea.scrollHeight) + "px";

  }

  function MaxMe(o) {

    if (window.navigator.userAgent.indexOf("Firefox") > -1) {

      o.style.height = o.scrollTop + o.scrollHeight + "px";

    }

    else {

      if (o.scrollTop > 0) o.style.height = o.scrollTop + o.scrollHeight + "px";

    }

  }



  function Init() {

    var t1 = document.getElementById("textarea1");

    InitHeight = t1.offsetHeight;



    var textarea = document.getElementById("textarea");

    if (textarea.addEventListener) {    // 非Internet Explorer和Internet Explorer9之后的版本

      textarea.addEventListener("input", OnTextInput, false);

      // Google Chrome 和 Safari

      textarea.addEventListener("textinput", OnTextInput, false);

    }



    if (textarea.attachEvent) { // Internet Explorer 和 Opera

      textarea.attachEvent("onpropertychange", OnTextInput);

    }

  }



  function OnTextInput(evt) {

    o = window.event ? window.event.srcElement : evt.target;

    if (window.navigator.userAgent.indexOf("Firefox") > -1) {

      o.style.height = o.scrollTop + o.scrollHeight + "px";

    }

    else {

      if (o.scrollTop > 0) o.style.height = o.scrollTop + o.scrollHeight + "px";

    }

  }

  window.onload = Init;

</script>

</body>

</html>

例子

方法1：支持拷贝粘贴、删除操作

方法2：只支持输入

方法3：只支持输入

【发表评论】【打印文章】【收藏本页】