React的一个示例实现:

const { useLayoutEffect, useState, useRef } = React; const TextArea = () => { const ref = useRef(); const [value, setValue] = useState('Some initial text that both wraps and uses\nnew\nlines'); // This only tracks the auto-sized height so we can tell if the user has manually resized const autoHeight = useRef(); useLayoutEffect(() => { if (!ref.current) { return; } if ( autoHeight.current !== undefined && ref.current.style.height !== autoHeight.current ) { // don't auto size if the user has manually changed the height return; } ref.current.style.height = "auto"; ref.current.style.overflow = "hidden"; const next = `${ref.current.scrollHeight}px`; ref.current.style.height = next; autoHeight.current = next; ref.current.style.overflow = "auto"; }, [value, ref, autoHeight]); return ( <textarea ref={ref} style={{ resize: 'vertical', minHeight: '1em', }} value={value} onChange={event => setValue(event.target.value)} /> ); } ReactDOM.render(<TextArea />, document.getElementById('app')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="app"></div>

对于那些正在寻找特定角度的答案的人，你可以使用这个选项来设置默认行数。

create directive

    @Directive({
  selector: '[appTextAreaAutoHeight]'
})
export class TextAreaAutoHeightDirective implements AfterViewInit {
  private row = 1;
  constructor(private el: ElementRef) {
    this.row = el.nativeElement.rows;
  }
  ngAfterViewInit(): void {
    const elem = this.el.nativeElement;
    elem.style.height = "1px";
    elem.style.minHeight = (this.row * elem.scrollHeight) + "px";
  }

  @HostListener('input', ['$event.target'])
  onInput(elem: any) {
    elem.style.height = "1px";
    elem.style.height = (elem.scrollHeight) + "px";
  }
}

使用方法:

<textarea id="title" rows="3" class="col-12 p-1 fs-15 fw-reg 
  rounded-1" appTextAreaAutoHeight
  placeholder="...*******$$$"></textarea>

作为一种不同的方法，您可以使用<span>来自动调整它的大小。你需要通过添加contentteditable ="true"属性使其可编辑，这样就完成了:

div { 宽度:200 px; ｝ 跨度{ 边框:1px实心#000; 填充:5 px; ｝ < div > <span contenteditable="true">此文本可以由用户编辑</span> < / div >

这种方法的唯一问题是，如果希望将值作为表单的一部分提交，就必须自己用JavaScript完成。这样做相对容易。例如，您可以添加一个隐藏字段，并在表单的onsubmit事件中将span的值赋给隐藏字段，然后该隐藏字段将自动与表单一起提交。

这里的一些答案没有考虑到填充。

假设你有一个maxHeight你不想去，这对我有用:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);

一个使用React的简单方法。

...
const textareaRef = useRef();

const handleChange = (e) => {
  textareaRef.current.style.height = "auto";
  textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
};

return <textarea ref={textareaRef} onChange={handleChange} />;

还有一种略有不同的方法。

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

这个想法是将文本从textarea复制到pre，让CSS确保它们具有相同的大小。

这样做的好处是框架提供了简单的工具来移动文本而不涉及任何事件。也就是说，在AngularJS中，你可以在textarea中添加ng-model="foo" ng-trim="false"，在pre中添加ng-bind="foo + '\n'"。看小提琴。

只需确保pre的字体大小与textarea相同。