textarea文本域宽度和高度width及height自动适应实现代码

要实现textarea文本域的宽度和高度自动适应，可以使用以下两种方法：

方法一：使用CSS属性resize

resize属性可以控制textarea文本域的调整大小功能。默认情况下，该属性值为none，即textarea不能调整大小。将属性值设置为both、horizontal、vertical之一，即可实现相应方向上的自动适应。同时，需要将width和height属性设置为auto。

示例一：

textarea {
  resize: both;
  width: auto;
  height: auto;
}

示例二：

textarea {
  resize: horizontal;
  width: auto;
  height: auto;
}

方法二：使用JavaScript自动适应

在文本域中输入文本后，JavaScript可以根据文本内容的实际高度和宽度来计算文本域的高度和宽度，并自动调整。具体的实现步骤如下：

1. 禁止用户手动调整textarea尺寸，将resize属性值设为none
2. 监听textarea的键盘输入事件和paste事件，触发文本变化处理函数
3. 在文本变化处理函数中，根据文本内容计算出实际高度和宽度，并将值设置为textarea的高度和宽度

示例一：

<textarea id="myTextarea" onkeyup="autoResize()"></textarea>

<script type="text/javascript">
function autoResize() {
  document.getElementById("myTextarea").style.height = "auto";
  document.getElementById("myTextarea").style.width = "auto";
  var h = document.getElementById("myTextarea").scrollHeight;
  var w = document.getElementById("myTextarea").scrollWidth;
  document.getElementById("myTextarea").style.height = h + "px";
  document.getElementById("myTextarea").style.width = w + "px";
}
</script>

示例二：

<textarea id="myTextarea"></textarea>

<script type="text/javascript">
function autoResize() {
  document.getElementById("myTextarea").style.height = "auto";
  document.getElementById("myTextarea").style.width = "auto";
  var h = document.getElementById("myTextarea").scrollHeight;
  var w = document.getElementById("myTextarea").scrollWidth;
  document.getElementById("myTextarea").style.height = h + "px";
  document.getElementById("myTextarea").style.width = w + "px";
}

document.getElementById("myTextarea").addEventListener("keyup", autoResize);
document.getElementById("myTextarea").addEventListener("paste", autoResize);
</script>

以上是textarea文本域宽度和高度width及height自动适应实现的完整攻略，按照以上步骤操作即可实现。