Textarea Autosize 自适应文本框

一个自适应内容大小的 React 文本框组件。

📦 1.5 kB gzipped

当触发键盘和窗口大小事件的时候，TextareaAutosize 组件将自动调整的文本框的高度。

空白的文本框

<TextareaAutosize
  aria-label="empty textarea"
  placeholder="Empty"
  style={{ width: 200 }}
/>

<TextareaAutosize
  aria-label="empty textarea"
  placeholder="Empty"
  style={{ width: 200 }}
/>

Press Enter to start editing

最小高度

<TextareaAutosize
  aria-label="minimum height"
  minRows={3}
  placeholder="Minimum 3 rows"
  style={{ width: 200 }}
/>

<TextareaAutosize
  aria-label="minimum height"
  minRows={3}
  placeholder="Minimum 3 rows"
  style={{ width: 200 }}
/>

Press Enter to start editing

最大高度

<TextareaAutosize
  maxRows={4}
  aria-label="maximum height"
  placeholder="Maximum 4 rows"
  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua."
  style={{ width: 200 }}
/>

<TextareaAutosize
  maxRows={4}
  aria-label="maximum height"
  placeholder="Maximum 4 rows"
  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua."
  style={{ width: 200 }}
/>

Press Enter to start editing

Base

The TextareaAutosize component is defined in the @mui/base package. It is reexported from @mui/material for convenience. In your application you may import it from either package.

import TextareaAutosize from '@mui/base/TextareaAutosize';

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<TextareaAutosize />