textarea 自动换行缩进分享

最新推荐文章于 2026-06-25 16:25:48 发布

原创最新推荐文章于 2026-06-25 16:25:48 发布 · 9.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Html

当前文章被收录于：

Html

4 篇文章 0 人学习

订阅专栏查看详情

JavaScript

当前文章被收录于：

JavaScript

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用JavaScript实现文本域自动换行的方法。通过监听文本框输入事件，并利用隐藏的文本框来计算实际高度，从而实现文本域随内容自动调整高度的功能。

html页面部分，也在body中：

<li>
            <span>出差说明</span>
            <div class="nr">
              <textarea  id="textt" placeholder="请输入出差说明"  ></textarea>
              <textarea id="shadoww"></textarea>
            </div>
 </li>

javascript部分：

  //设置文本域自动换行 js
    var textt = document.getElementById("textt"); //用户看到的文本框
    var shadoww = document.getElementById("shadoww"); //隐藏的文本框
    textt.oninput = //非IE的
        textt.onpropertychange = //IE的
        onchange;
    function onchange() {
        shadoww.value = textt.value;
        setHeight();
        setTimeout(setHeight, 0); //针对IE 6/7/8的延迟, 否则有时会有一个字符的出入
        function setHeight() {
            textt.style.height = shadoww.scrollHeight + "px";
        }
    }