自动调整大小

https://github.com/jackmoore/autosize

只是作品，独立，很受欢迎(截至2018年10月，3.0k+ GitHub星)，可在cdnjs上使用)和轻量级(~3.5k)。演示:

<textarea id=“autosize” style=“width：200px;”>a 我一 C</textarea> <script src=“https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js”></script> <script>autosize（document.querySelectorAll（'#autosize'））;</script>

顺便说一句，如果你正在使用ACE编辑器，请使用maxLines: Infinity:自动调整ACE Cloud 9编辑器中的内容高度

一个完整而简单的解决方案

更新2022-08-30 (默认增加了单行多文本框的支持)

下面的代码将工作:

按键输入。 粘贴文本(右键单击并ctrl+v)。 剪切文本(右键单击并ctrl+x)。 与预加载文本。 与所有的文本区域(多行文本框的)网站宽。 使用Firefox (v31-109测试)。 Chrome (v37-108测试)。 使用IE (v9-v11测试)。 使用Edge (v14-v108测试)。 IOS Safari。 Android浏览器。 JavaScript严格模式。

---

选项1(使用jQuery)

此选项需要jQuery，并且已经过测试，适用于1.7.2 - 3.6.3

简单(将jQuery代码添加到主脚本文件中，然后忘记它)。

$("textarea").each(function () { this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;"); }).on("input", function () { this.style.height = 0; this.style.height = (this.scrollHeight) + "px"; }); <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js"></script> <textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea> <textarea placeholder="Type, paste, cut text here..."></textarea>

在jsfiddle上测试

---

OPTION 2(纯JavaScript)

简单(将此JavaScript添加到主脚本文件中，然后忘记它)。

const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); tx[i].addEventListener("input", OnInput, false); } function OnInput() { this.style.height = 0; this.style.height = (this.scrollHeight) + "px"; } <textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea> <textarea placeholder="Type, paste, cut text here..."></textarea>

在jsfiddle上测试

---

选项3 (jQuery扩展)

如果你想应用进一步的链接到文本区域，你想自动调整大小。

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ "height": 0, "overflow-y": "hidden" })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on("input", function() {
        autoHeight_(this);
      });
    });
  }
});

使用$("textarea")调用。autoheight ()

---

通过javascript更新文本区域

当通过JavaScript向文本区域注入内容时，添加以下代码来调用选项1中的函数。

$("textarea").trigger("input");

---

预设文本区域高度

要修复文本区域的初始高度，你需要添加另一个条件:

const txHeight = 16; const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { if (tx[i].value == '') { tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;"); } else { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); } tx[i].addEventListener("input", OnInput, false); } function OnInput(e) { this.style.height = 0; this.style.height = (this.scrollHeight) + "px"; } <textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea> <textarea placeholder="Type, paste, cut text here..."></textarea>

我创建了一个小的(7kb)自定义元素，为您处理所有这些调整大小的逻辑。

它可以在任何地方工作，因为它是作为自定义元素实现的。包括:虚拟dom (React, Elm等)，服务器端呈现的东西，如PHP和简单乏味的HTML文件。

除了监听输入事件外，它还有一个计时器，每100毫秒触发一次，以确保在文本内容通过其他方式发生变化的情况下，事情仍在工作。

下面是它的工作原理:

// At the top of one of your Javascript files
import "autoheight-textarea";

或作为脚本标记包含

<script src="//cdn.jsdelivr.net/npm/autoheight-textarea@1.0.1/dist/main.min.js"></script>

然后像这样包装你的textarea元素

HTML文件

<autoheight-textarea>
  <textarea rows="4" placeholder="Type something"></textarea>
<autoheight-textarea>

React.js组件

const MyComponent = () => {
  return (
    <autoheight-textarea>
      <textarea rows={4} placeholder="Type something..." />
    </autoheight-textarea>
  );
}

下面是Codesandbox上的一个基本演示:https://codesandbox.io/s/unruffled-http-2vm4c

你可以在这里获取软件包:https://www.npmjs.com/package/autoheight-textarea

如果你只是想看看调整大小的逻辑，你可以看看这个函数:https://github.com/Ahrengot/autoheight-textarea/blob/master/src/index.ts#L74-L85

对于Angular 2+，就这么做

<textarea (keydown)="resize($event)"></textarea>


resize(e) {
    setTimeout(() => {
      e.target.style.height = 'auto';
      e.target.style.height = (e.target.scrollHeight)+'px';
    }, 0);
  }

textarea {
  resize: none;
  overflow: hidden;
}

您正在使用当前clientHeight和内容scrollHeight的较高值。当您通过删除内容使scrollHeight变小时，计算区域不能变小，因为先前根据样式设置的clientHeight。高度，是撑开它。您可以使用scrollHeight的max()和预定义的或从textarea.rows中计算的最小高度值。

In general you probably shouldn't really rely on scrollHeight on form controls. Apart from scrollHeight being traditionally less widely-supported than some of the other IE extensions, HTML/CSS says nothing about how form controls are implemented internally and you aren't guaranteed scrollHeight will be anything meaningful. (Traditionally some browsers have used OS widgets for the task, making CSS and DOM interaction on their internals impossible.) At least sniff for scrollHeight/clientHeight's existance before trying to enable the effect.

另一种可能的替代方法来避免这个问题，如果重要的是，它可以更广泛地工作，可能是使用一个隐藏的div大小相同的文本区域的宽度，并设置在相同的字体。在keyup上，您将文本从文本区域复制到隐藏div中的文本节点(记住用换行符替换'\n'，如果使用innerHTML则正确转义'<'/'&')。然后简单地测量div的offsetHeight将给你你需要的高度。

对于那些想要在宽度和高度上自动调整文本区域的人:

HTML:

<textarea class='textbox'></textarea>
<div>
  <span class='tmp_textbox'></span>
</div>

CSS:

.textbox,
.tmp_textbox {
  font-family: 'Arial';
  font-size: 12px;
  resize: none;
  overflow:hidden;
}

.tmp_textbox {
  display: none;
}

jQuery:

$(function(){
  //alert($('.textbox').css('padding'))
  $('.textbox').on('keyup change', checkSize)
  $('.textbox').trigger('keyup')

  function checkSize(){
    var str = $(this).val().replace(/\r?\n/g, '<br/>');
    $('.tmp_textbox').html( str )
    console.log($(this).val())

    var strArr = str.split('<br/>')
    var row = strArr.length
    $('.textbox').attr('rows', row)
    $('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 )
  }
})

Codepen:

http://codepen.io/anon/pen/yNpvJJ

欢呼,