useTextareaAutosize

カテゴリ

ブラウザ

エクスポートサイズ

869 バイト

最終更新日

先週

コンテンツに応じてテキストエリアの高さを自動的に更新します。

デモ

ソース

入力すると、テキストエリアが拡大します

使用方法

簡単な例

vue

<script setup lang="ts">
const { textarea, input } = useTextareaAutosize()
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
  />
</template>

情報

大量のテキストに対して高さの値が正しく計算されないのを避けるため、テキストエリア要素のスクロールバースタイルをリセットすることをお勧めします。

css

textarea {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

`rows`属性を使用する場合

テキストエリア要素でrows属性をサポートする必要がある場合は、stylePropオプションをminHeightに設定する必要があります。

vue

<script setup lang="ts">
const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
    rows="3"
  />
</template>

型宣言

型宣言を表示

typescript

export interface UseTextareaAutosizeOptions {
  /** Textarea element to autosize. */
  element?: MaybeRef<HTMLTextAreaElement | undefined>
  /** Textarea content. */
  input?: MaybeRef<string | undefined>
  /** Watch sources that should trigger a textarea resize. */
  watch?: WatchSource | Array<WatchSource>
  /** Function called when the textarea size changes. */
  onResize?: () => void
  /** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self.  */
  styleTarget?: MaybeRef<HTMLElement | undefined>
  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
  styleProp?: "height" | "minHeight"
}
export declare function useTextareaAutosize(
  options?: UseTextareaAutosizeOptions,
): {
  textarea: Ref<HTMLTextAreaElement, HTMLTextAreaElement>
  input: Ref<string, string>
  triggerResize: () => void
}
export type UseTextareaAutosizeReturn = ReturnType<typeof useTextareaAutosize>