フォームテキストエリア

自動高さ調整、最小行数と最大行数のサポート、コンテキスト状態を備えた複数行テキスト入力を作成します。

<template>
  <div>
    <b-form-textarea
      id="textarea"
      v-model="text"
      placeholder="Enter something..."
      rows="3"
      max-rows="6"
    ></b-form-textarea>

    <pre class="mt-3 mb-0">{{ text }}</pre>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: ''
      }
    }
  }
</script>

<!-- b-form-textarea.vue -->

サイズ制御

sizeプロパティにsmまたはlgを設定して、それぞれ小さいサイズまたは大きいサイズでテキストの高さを設定します。

幅を制御するには、標準のBootstrapグリッドカラム内にインプットを配置します。

<b-container fluid>
  <b-row>
    <b-col sm="2">
      <label for="textarea-small">Small:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-small"
        size="sm"
        placeholder="Small textarea"
      ></b-form-textarea>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-default">Default:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-default"
        placeholder="Default textarea"
      ></b-form-textarea>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-large">Large:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-large"
        size="lg"
        placeholder="Large textarea"
      ></b-form-textarea>
    </b-col>
  </b-row>
</b-container>

<!-- b-form-textarea-sizes.vue -->

表示行数

<b-form-textarea>の高さを設定するには、rowsプロパティに目的の行数を設定します。rowsに値が指定されていない場合、デフォルトで2（ブラウザのデフォルト値であり、最小許容値）になります。`null`または2未満の値を設定すると、デフォルトの2が使用されます。

<div>
  <b-form-textarea
    id="textarea-rows"
    placeholder="Tall textarea"
    rows="8"
  ></b-form-textarea>
</div>

<!-- b-form-textarea-rows.vue -->

サイズ変更ハンドルの無効化

一部のWebブラウザでは、ユーザーがテキストエリアの高さを変更できます。この機能を無効にするには、no-resizeプロパティをtrueに設定します。

<div>
  <b-form-textarea
    id="textarea-no-resize"
    placeholder="Fixed height textarea"
    rows="3"
    no-resize
  ></b-form-textarea>
</div>

<!-- b-form-textarea-no-resize.vue -->

自動高さ

<b-form-textarea>は、ユーザーがテキストを入力または削除しても、コンテンツに合わせて高さを自動的に調整できます。テキストエリアの高さは、コンテンツに合わせて拡大または縮小されます（最大max-rowsまで拡大、最小rowsまで縮小）。

初期の最小高さ（行数）を設定するには、rowsプロパティに目的の行数を設定します（またはデフォルトの2のままにします）。そして、テキストエリアが拡大する最大行数（スクロールバーが表示される前）をmax-rowsプロパティに設定します。

高さを固定（つまり、縮小しない）にするには、no-auto-shrinkプロパティをtrueに設定します。no-auto-shrinkプロパティは、max-rowsが設定されていないか、rows以下である場合は効果がありません。

自動高さモードでは、テキストエリアのサイズ変更ハンドル（ブラウザでサポートされている場合）は自動的に無効になります。

<b-container fluid>
  <b-row>
    <b-col sm="2">
      <label for="textarea-auto-height">Auto height:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-auto-height"
        placeholder="Auto height textarea"
        rows="3"
        max-rows="8"
      ></b-form-textarea>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-no-auto-shrink">No auto-shrink:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-no-auto-shrink"
        placeholder="Auto height (no-shrink) textarea"
        rows="3"
        max-rows="8"
        no-auto-shrink
      ></b-form-textarea>
    </b-col>
  </b-row>
</b-container>

<!-- b-form-textarea-auto-height.vue -->

自動高さの実装に関する注記

自動高さはCSSクエリを使用して結果の高さを計算するため、入力はドキュメント（DOM）内に存在し、表示されている必要があります（display: noneで非表示になっていません）。初期の高さはマウント時に計算されます。ブラウザクライアントがIntersectionObserver（ネイティブまたはポリフィルを介して）をサポートしている場合、<b-form-textarea>はこれを利用してテキストエリアが表示された時点を判断し、高さを計算します。開始ページのブラウザサポートセクションを参照してください。

コンテキスト状態

Bootstrapには、ほとんどのフォームコントロールでvalid状態とinvalid状態のバリデーションスタイルが含まれています。

一般的に、特定の種類のフィードバックには特定の状態を使用します。

false（無効状態を示す）は、必須フィールドやブロックするフィールドに最適です。ユーザーはフォームを送信するためにこのフィールドを正しく入力する必要があります。
true（有効状態を示す）は、フォーム全体でフィールドごとのバリデーションを行い、ユーザーを他のフィールドへと促したい場合に最適です。
null バリデーション状態を表示しません（有効でも無効でもありません）

<b-form-textarea>にコンテキスト状態アイコンを適用するには、stateプロパティをfalse（無効の場合）、true（有効の場合）、またはnull（バリデーション状態なし）に設定します。

<template>
  <div>
    <b-form-textarea
      id="textarea-state"
      v-model="text"
      :state="text.length >= 10"
      placeholder="Enter at least 10 characters"
      rows="3"
    ></b-form-textarea>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: ''
      }
    }
  }
</script>

<!-- b-form-textarea-state.vue -->

支援技術と色覚異常のあるユーザーへのコンテキスト状態の伝達

これらのコンテキスト状態を使用してフォームコントロールの状態を示すことは、視覚的な色に基づく表示のみを提供するため、スクリーンリーダーなどの支援技術のユーザーや色覚異常のあるユーザーには伝えられません。

状態の代替表示も提供してください。たとえば、フォームコントロールの<label>テキスト自体に状態に関するヒントを含めるか、追加のヘルプテキストブロックを提供することができます。

`aria-invalid`属性

<b-form-textarea>が無効なコンテキスト状態を持つ場合（つまり、stateがfalseの場合）、aria-invalidプロパティをtrueまたはサポートされている値のいずれかに設定することもできます。

false: エラーなし（デフォルト）
trueまたは'true': 値がバリデーションに失敗しました。
'grammar': 文法エラーが検出されました。
'spelling': スペルミスが検出されました。

stateプロパティがfalseに設定されていて、aria-invalidプロパティが明示的に設定されていない場合、<b-form-textarea>は自動的にaria-invalid属性を'true'に設定します。

フォーマッタサポート

<b-form-textarea>は、formatterプロパティに関数参照を渡すことで、オプションでフォーマットをサポートします。

フォーマット（フォーマッタ関数が提供されている場合）は、コントロールのネイティブinputイベントとchangeイベントが発生したときに実行されます。ブール型のプロパティlazy-formatterを使用して、フォーマッタ関数をコントロールのネイティブblurイベントでのみ呼び出すように制限できます。

formatter関数は、入力要素の生のvalueと、フォーマットをトリガーしたネイティブeventオブジェクト（使用可能な場合）の2つの引数を受け取ります。

formatter関数は、フォーマットされた値を*文字列*として返す必要があります。

formatterが提供されていない場合、フォーマットは実行されません。

<template>
  <div>
    <b-form-group
      label="Textarea with formatter (on input)"
      label-for="textarea-formatter"
      description="We will convert your text to lowercase instantly"
      class="mb-0"
    >
      <b-form-textarea
        id="textarea-formatter"
        v-model="text1"
        placeholder="Enter your text"
        :formatter="formatter"
      ></b-form-textarea>
    </b-form-group>
    <p style="white-space: pre-line"><b>Value:</b> {{ text1 }}</p>

    <b-form-group
      label="Textarea with lazy formatter (on blur)"
      label-for="textarea-lazy"
      description="This one is a little lazy!"
      class="mb-0"
    >
      <b-form-textarea
        id="textarea-lazy"
        v-model="text2"
        placeholder="Enter your text"
        lazy-formatter
        :formatter="formatter"
      ></b-form-textarea>
    </b-form-group>
    <p class="mb-0" style="white-space: pre-line"><b>Value:</b> {{ text2 }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text1: '',
        text2: ''
      }
    },
    methods: {
      formatter(value) {
        return value.toLowerCase()
      }
    }
  }
</script>

<!-- b-form-textarea-formatter.vue -->

注記: 非遅延フォーマットの場合、カーソルの位置が入力値の末尾でない場合、文字が入力された*後*にカーソルが末尾にジャンプすることがあります。提供されているイベントオブジェクトとevent.targetを使用して、ネイティブ入力の選択メソッドとプロパティにアクセスし、挿入位置を制御できます。これは、読者の課題として残されています。

読み取り専用プレーンテキスト

フォーム内に<b-form-textarea readonly>要素をプレーンテキストとしてスタイル設定する場合は、plaintextプロパティを設定します（デフォルトのフォームフィールドのスタイル設定を削除し、正しいテキストサイズ、マージン、パディング、高さを維持するために、readonlyを設定する必要はありません）。

<template>
  <div>
    <b-form-textarea id="textarea-plaintext" plaintext :value="text"></b-form-textarea>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: "This is some text.\nIt is read only and doesn't look like an input."
      }
    }
  }
</script>

<!-- b-form-textarea-plaintext.vue -->

`v-model`修飾子

Vueは、カスタムコンポーネントベースの入力のv-modelで.lazy、.trim、.number修飾子を公式にサポートしておらず、悪いユーザーエクスペリエンスを生成する可能性があります。Vueのネイティブ修飾子の使用は避けてください。

これを回避するために、<b-form-textarea> は、ネイティブVueのv-model修飾子.trim、.number、.lazyをそれぞれエミュレートする3つのブール型プロパティtrim、number、lazyを持っています。lazyプロパティは、change/ blurイベントでv-modelを更新します。

備考

numberプロパティはtrimプロパティよりも優先されます（つまり、numberが設定されている場合、trimは無効になります）。
numberプロパティを使用する場合、値が数値として解析できる場合（parseFloatを使用）、Number型の値をv-modelに返します。そうでない場合、元の入力値はString型で返されます。これは、ネイティブの.number修飾子の動作と同じです。
trimおよびnumber修飾子プロパティは、inputまたはchangeイベントによって返される値には影響しません。これらのイベントは、常にオプションのフォーマット後の<textarea>の内容の文字列値を返します（修飾子を処理するv-model updateイベントによって返される値と一致しない場合があります）。

デバウンスのサポート

lazy修飾子プロパティの代わりに、<b-form-textarea>は、ユーザー入力のデバウンスをオプションでサポートしています。ユーザーが最後に文字を入力してから（またはchangeイベントが発生してから）アイドル時間が経過した後にv-modelを更新します。アイドルタイムアウトが期限切れになる前にユーザーが新しい文字を入力するか（または文字を削除する）と、タイムアウトは再開されます。

デバウンスを有効にするには、プロパティdebounceを0より大きい整数に設定します。値はミリ秒単位で指定します。debounceを0に設定すると、デバウンスは無効になります。

注：lazyプロパティが設定されている場合、デバウンスは発生しません。

<template>
  <div>
    <b-form-textarea v-model="value" debounce="500" rows="3" max-rows="5"></b-form-textarea>
    <pre class="mt-2 mb-0">{{ value }}</pre>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

<!-- b-form-textarea-debounce.vue -->

自動フォーカス

autofocusプロパティが<b-form-textarea>に設定されている場合、テキストエリアはドキュメントに挿入されたとき（つまり、**マウントされたとき**）に自動的にフォーカスされ、Vue <keep-alive>コンポーネント内にある場合は再アクティブ化されます。このプロパティは、テキストエリアにautofocus属性を設定せず、テキストエリアが表示された時点を検出することもできません。

ネイティブイベントとカスタムイベント

(カスタムinputおよびchangeイベントを除く)すべてのネイティブイベントは、.native修飾子を使用する必要なくサポートされています。

カスタムinputおよびchangeイベントは、現在のvalue（任意のフォーマットが適用された後）の単一引数を受け取り、ユーザーの操作によってトリガーされます。

カスタムupdateイベントには入力値が渡され、v-modelの更新が必要になるたびに発行されます（必要に応じてinput、change、blurの前に発行されます）。

.native修飾子を使用することで、常にネイティブのinputおよびchangeイベントにアクセスできます。

公開されている入力プロパティとメソッド

<b-form-textarea>は、ネイティブ入力要素のいくつかのプロパティとメソッドをコンポーネント参照で公開します（つまり、<b-form-textarea ref="foo" ...>にrefを割り当て、this.$refs['foo'].propertyNameまたはthis.$refs['foo'].methodName(...)を使用します）。

入力プロパティ

プロパティ	備考
`.selectionStart`	読み書き
`.selectionEnd`	読み書き
`.selectionDirection`	読み書き
`.validity`	読み取り専用
`.validationMessage`	読み取り専用
`.willValidate`	読み取り専用

入力メソッド

メソッド	備考
`.focus()`	入力にフォーカス
`.blur()`	入力からフォーカスを削除
`.select()`	入力内のすべてのテキストを選択
`.setSelectionRange()`
`.setRangeText()`
`.setCustomValidity()`
`.checkValidity()`
`.reportValidity()`

これらのメソッドとプロパティの詳細については、https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElementを参照してください。サポートは入力の種類によって異なります。

コンポーネントリファレンス

`<b-form-textarea>`

ソースコードを見る

<b-form-textarea> コンポーネントエイリアス
<b-form-textarea> プロパティ
<b-form-textarea> v-model
<b-form-textarea> イベント

コンポーネントエイリアス

<b-form-textarea> は、以下のエイリアスでも使用できます。

<b-textarea>

注：コンポーネントエイリアスは、BootstrapVue全体をインポートする場合、またはコンポーネントグループプラグインを使用する場合にのみ使用できます。

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ (昇順にソートするにはクリック)	型 (昇順にソートするにはクリック)	デフォルト	説明
`aria-invalid`	`Boolean` または `String`	`false`	'aria-invalid'属性を指定された値で設定します
`autocomplete`	`String`		フォームコントロールの'autocomplete'属性値を設定します
`autofocus`	`Boolean`	`false`	`true`に設定すると、マウント時、またはkeep-alive内にある場合の再アクティブ化時に、コントロールに自動的にフォーカスしようとします。コントロールに`autofocus`属性を設定しません。
`debounce` v2.1.0+	`Number` または `String`	`0`	ミリ秒数を0より大きい数値に設定すると、ユーザー入力がデバウンスされます。プロパティ'lazy'が設定されている場合、効果はありません。
`disabled`	`Boolean`	`false`	`true`に設定すると、コンポーネントの機能を無効にし、無効な状態にします。
`form`	`String`		フォームコントロールが属するフォームのID。コントロールの`form`属性を設定します。
`formatter`	`Function`		テキストエリアをフォーマットするための関数の参照
`id`	`String`		レンダリングされたコンテンツの`id`属性を設定するために使用され、必要に応じて追加の要素IDを生成するためのベースとして使用されます。
`lazy` v2.1.0+	`Boolean`	`false`	'input'の代わりに'change'/'blur'イベントでv-modelを更新します。Vueの'.lazy' v-model修飾子をエミュレートします。
`lazy-formatter`	`Boolean`	`false`	設定されている場合、テキストエリアは、各キーストロークではなく、フォーカスが外れたときにフォーマットされます（フォーマッタが指定されている場合）。
`max-rows`	`Number` または `String`		表示する最大行数。指定されると、テキストエリアは最大行数までコンテンツに合わせて（または縮小して）サイズが調整されます。
`name`	`String`		フォームコントロールの`name`属性の値を設定します。
`no-auto-shrink`	`Boolean`	`false`	設定されている場合、自動高さのテキストエリアがコンテンツに合わせて縮小されるのを防ぎます。
`no-resize`	`Boolean`	`false`	設定されている場合、ブラウザのサイズ変更ハンドルが無効になり、ユーザーがテキストエリアの高さを変更できなくなります。自動高さモードの場合に自動的に設定されます。
`number`	`Boolean`	`false`	設定されている場合、入力値をネイティブの数値に変換しようとします。Vueの'.number' v-model修飾子をエミュレートします。
`placeholder`	`String`		フォームコントロールの`placeholder`属性値を設定します。
`plaintext`	`Boolean`	`false`	フォームコントロールを読み取り専用に設定し、プレーンテキストのように見えるようにコントロールをレンダリングします（境界線なし）。
`readonly`	`Boolean`	`false`	フォームコントロールに`readonly`属性を設定します。
`required`	`Boolean`	`false`	フォームコントロールに`required`属性を追加します。
`rows`	`Number` または `String`	`2`	表示する最小行数。1より大きい値である必要があります。
`size`	`String`		コンポーネントの外観のサイズを設定します。'sm'、'md'(デフォルト)、または'lg'
`state`	`Boolean`	`null`	コンポーネントの検証状態の外観を制御します。有効な場合は`true`、無効な場合は`false`、検証状態がない場合は`null`。
`trim`	`Boolean`	`false`	設定されている場合、入力値の先頭と末尾の空白をトリムします。Vueの'.trim' v-model修飾子をエミュレートします。
`value` v-model	`Number` または `String`	`''`	テキストエリアの現在の値。'number'プロパティが使用されている場合を除き、結果は常に文字列になります。
`wrap`	`String`	`'soft'`	テキストエリアの'wrap'属性に配置する値。改行がどのように返されるかを制御します。

`v-model`

プロパティ	イベント
`value`	`update`

イベント

イベント	引数	説明
`blur`	`event` - ネイティブblurイベント（任意のフォーマットが行われる前）	テキストエリアのフォーカスが失われた後に発行されます。
`change`	`value` - テキストエリアの現在の値	ユーザー操作によってトリガーされる変更イベント。任意のフォーマット（'trim'または'number'プロパティを含まない）の後、およびv-modelが更新された後に発行されます。
`input`	`value` - テキストエリアの現在の値	ユーザー操作によってトリガーされる入力イベント。あらゆるフォーマット処理の後（'trim'または'number'プロップを除く）と、v-modelの更新後に発行されます。
`update`	`value` - あらゆるフォーマット処理後のテキストエリアの値。値が変更されない場合は発行されません。	v-modelを更新するために発行されます。

個々のコンポーネントのインポート

次の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント	名前付きエクスポート	インポートパス
`<b-form-textarea>`	`BFormTextarea`	`bootstrap-vue`

例

import { BFormTextarea } from 'bootstrap-vue'
Vue.component('b-form-textarea', BFormTextarea)

Vue.jsプラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート	インポートパス
`FormTextareaPlugin`	`bootstrap-vue`

例

import { FormTextareaPlugin } from 'bootstrap-vue'
Vue.use(FormTextareaPlugin)