フォーム入力

<template>
  <div>
    <b-form-input v-model="text" placeholder="Enter your name"></b-form-input>
    <div class="mt-2">Value: {{ text }}</div>
  </div>
</template>

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

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

入力タイプ

<b-form-input>のデフォルトはtext入力ですが、typeプロパティを、サポートされているネイティブブラウザのHTML5タイプ（text、password、email、number、url、tel、search、date、datetime、datetime-local、month、week、time、range、またはcolor）のいずれかに設定できます。

<template>
  <b-container fluid>
    <b-row class="my-1" v-for="type in types" :key="type">
      <b-col sm="3">
        <label :for="`type-${type}`">Type <code>{{ type }}</code>:</label>
      </b-col>
      <b-col sm="9">
        <b-form-input :id="`type-${type}`" :type="type"></b-form-input>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        types: [
          'text',
          'number',
          'email',
          'password',
          'search',
          'url',
          'tel',
          'date',
          'time',
          'range',
          'color'
        ]
      }
    }
  }
</script>

<!-- b-form-input-types.vue -->

typeプロパティがサポートされていない入力タイプ（上記参照）に設定されている場合、text入力がレンダリングされ、コンソール警告が出力されます。

入力タイプの注意事項

• すべてのブラウザがすべての入力タイプをサポートしているわけではなく、ブラウザの種類/バージョンによって一部のタイプが同じ形式でレンダリングされるわけでもありません。Can I useを参照してください。
• 特定のタイプをサポートしていないブラウザは、text入力タイプにフォールバックします（レンダリングされたtype属性のマークアップには、リクエストされたタイプが表示されますが）。
• リクエストされた入力タイプがブラウザでサポートされているかどうかを確認するためのテストは実行されません。
• Chromeはバージョン26でdatetimeのサポートを失い、Operaはバージョン15で、SafariはiOS 7で失いました。datetimeを使用する代わりに、サポートが非推奨になっているため、dateとtimeを2つの別々の入力として使用してください。
• dateおよびtime入力はネイティブブラウザタイプであり、カスタムの日付/時刻ピッカーではありません。
• 日付と時刻のスタイルの入力の場合、サポートされている場合、GUIに表示される値は、その値によって返される値（つまり、年-月-日の順序）とは異なる場合があります。
• 入力タイプに関係なく、値は常に文字列表現として返されます。
• v-model.lazyは、<b-form-input>（またはカスタムVueコンポーネント）ではサポートされていません。lazyプロパティを代わりに使用してください。
• v-model修飾子.numberと.trimは、ユーザーが入力しているときに予期しないカーソルのジャンプを引き起こす可能性があります（これは、カスタムコンポーネントでのv-modelに関するVueの問題です）。これらの修飾子の使用は避けてください。numberまたはtrimプロパティを代わりに使用してください。
• 古いバージョンのFirefoxは、rangeタイプの入力でreadonlyをサポートしていない可能性があります。
• min、max、およびstepをサポートしない入力タイプ（text、password、tel、email、urlなど）は、値が提供されていても、これらの値を無視します（ただし、それらは入力マークアップにレンダリングされます）。

予測テキスト入力とIME構成入力に関する注意事項

• 予測テキストの自動提案ワードを使用すると、自動提案された単語が選択される（またはスペースが入力される）までv-modelは更新されません。自動提案された単語が選択されていない場合、v-modelは入力がフォーカスを失ったときに、入力の現在の表示テキストで更新されます。
• IME構成（中国語、日本語など）を使用する場合、IME構成が完了するまでv-modelは更新されません。

範囲タイプ入力

rangeタイプの入力は、Bootstrap v4の.custom-rangeクラスを使用してレンダリングされます。トラック（背景）とサム（値）は、ブラウザ間で同じように表示されるようにスタイル設定されています。

範囲入力には、それぞれ0と100のminとmaxの暗黙的な値があります。minおよびmaxプロパティを使用して、これらの新しい値を指定できます。

<template>
  <div>
    <label for="range-1">Example range with min and max</label>
    <b-form-input id="range-1" v-model="value" type="range" min="0" max="5"></b-form-input>
    <div class="mt-2">Value: {{ value }}</div>
  </div>
</template>

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

<!-- b-form-input-range.vue -->

デフォルトでは、範囲入力は整数値に「スナップ」します。これを変更するには、step値を指定できます。以下の例では、step="0.5"を使用してステップ数を2倍にしています。

<template>
  <div>
    <label for="range-2">Example range with step value</label>
    <b-form-input id="range-2" v-model="value" type="range" min="0" max="5" step="0.5"></b-form-input>
    <div class="mt-2">Value: {{ value }}</div>
  </div>
</template>

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

<!-- b-form-input-range-step.vue -->

注：範囲入力は（すべての入力タイプと同様に）値を文字列として返します。Number(value)、parseInt(value, 10)、parseFloat(value)を使用するか、numberプロパティを使用して、値をネイティブ数値に変換する必要がある場合があります。

注：Bootstrap v4 CSSには、入力グループ内の範囲入力のスタイル設定や、範囲入力での検証スタイル設定は含まれていません。ただし、BootstrapVueには、Bootstrap v4にスタイル設定が含まれるまで、これらの状況を処理するためのカスタムスタイル設定が含まれています。

コントロールのサイズ設定

高さを設定するには、sizeプロパティをそれぞれsmまたはlgに設定して、小または大にします。

幅を制御するには、入力を標準のBootstrapグリッド列内に配置します。

<b-container fluid>
  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-small">Small:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-small" size="sm" placeholder="Enter your name"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-default">Default:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-default" placeholder="Enter your name"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-large">Large:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-large" size="lg" placeholder="Enter your name"></b-form-input>
    </b-col>
  </b-row>
</b-container>

<!-- b-form-input-size.vue -->

注：入力タイプrangeは、<b-input-group>内に配置され、そのsizeプロパティが設定されていない限り、現在コントロールのサイズ設定をサポートしていません。

注：ネイティブHTMLの<input>属性のsize（<input>に水平幅を文字数で設定します）はサポートされていません。スタイル、ユーティリティクラス、またはレイアウト行（<b-row>）と列（<b-col>）を使用して、目的の幅を設定してください。

コンテキストの状態

Bootstrapには、ほとんどのフォームコントロールのvalidおよびinvalid状態の検証スタイルが含まれています。

一般的に言えば、特定の種類のフィードバックには特定の状態を使用する必要があります

• false（無効状態を示す）は、ブロックされた、または必須のフィールドがある場合に最適です。ユーザーはフォームを送信するために、このフィールドに適切に入力する必要があります。
• true（有効状態を示す）は、フォーム全体でフィールドごとの検証を行い、残りのフィールドを通してユーザーを奨励したい場合に最適です。
• null検証状態を表示しません（有効でも無効でもありません）

<b-form-input>にコンテキスト状態アイコンの1つを適用するには、stateプロパティをfalse（無効の場合）、true（有効の場合）、またはnull（検証状態なし）に設定します。

<b-container fluid>
  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-none">No State:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-none" :state="null" placeholder="No validation"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-valid">Valid State:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-valid" :state="true" placeholder="Valid input"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-invalid">Invalid State:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-invalid" :state="false" placeholder="Invalid input"></b-form-input>
    </b-col>
  </b-row>
</b-container>

<!-- b-form-input-states.vue -->

ライブ例

<template>
  <div role="group">
    <label for="input-live">Name:</label>
    <b-form-input
      id="input-live"
      v-model="name"
      :state="nameState"
      aria-describedby="input-live-help input-live-feedback"
      placeholder="Enter your name"
      trim
    ></b-form-input>

    <!-- This will only be shown if the preceding input has an invalid state -->
    <b-form-invalid-feedback id="input-live-feedback">
      Enter at least 3 letters
    </b-form-invalid-feedback>

    <!-- This is a form text block (formerly known as help block) -->
    <b-form-text id="input-live-help">Your full name.</b-form-text>
  </div>
</template>

<script>
  export default {
    computed: {
      nameState() {
        return this.name.length > 2 ? true : false
      }
    },
    data() {
      return {
        name: ''
      }
    }
  }
</script>

<!-- b-form-input-states-feedback.vue -->

ヒント：上記のマークアップと同様のマークアップを自動的に生成するには、<b-form-group>コンポーネントを使用します。

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

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

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

ARIA aria-invalid属性

特に支援技術の場合、無効なフォームコントロールにaria-invalid="true"属性を割り当てることもできます。

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

• false: エラーが検出されていないことを示します（デフォルト）。
• true (または 'true'): 値が検証に失敗したことを示します。
• 'grammar': 文法エラーが検出されたことを示します。
• 'spelling': スペルミスが検出されたことを示します。

aria-invalid が明示的に設定されておらず、state が false に設定されている場合、入力の aria-invalid 属性は自動的に 'true' に設定されます。

フォーマッタのサポート

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

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

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

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

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

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

    <b-form-group
      label="Text input with lazy formatter (on blur)"
      label-for="input-lazy"
      description="This one is a little lazy!"
      class="mb-0"
    >
      <b-form-input
        id="input-lazy"
        v-model="text2"
        placeholder="Enter your name"
        lazy-formatter
        :formatter="formatter"
      ></b-form-input>
    </b-form-group>
    <p class="mb-0"><b>Value:</b> {{ text2 }}</p>
  </div>
</template>

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

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

注意: テキストのような入力（color、range、date、number、email など）以外の入力を使用する場合は、フォーマッタ関数が入力タイプに対して予期される形式（date -> '2000-06-01'、color -> '#ff0000' など）で値を返すようにしてください。フォーマッタは値を文字列として返す必要があります。

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

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

フォームで <b-form-input readonly> 要素をプレーンテキストとしてスタイルしたい場合は、plaintext prop を設定します（readonly を設定する必要はありません）。これにより、デフォルトのフォームフィールドのスタイルが削除され、正しいマージンとパディングが保持されます。

plaintext オプションは、入力タイプ color または range ではサポートされていません。

数値のような入力でのマウスホイールイベントの無効化

一部のブラウザでは、数値のような入力にフォーカスがある状態でマウスホイールをスクロールすると、入力値が増減します。このブラウザの機能を無効にするには、no-wheel prop を true に設定するだけです。

データリストのサポート

データリストは、<option> タグのリストを含むネイティブ HTML タグ <datalist> です。ID をデータリストタグに割り当てることで、list 属性を追加することで、テキスト入力からリストを参照できます。

これにより、入力はコンボボックスまたはオートコンプリートの動作になり、既存の値を選択したり、新しい値を入力したりできます。

<template>
  <div>
    <b-form-input list="my-list-id"></b-form-input>

    <datalist id="my-list-id">
      <option>Manual Option</option>
      <option v-for="size in sizes">{{ size }}</option>
    </datalist>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sizes: ['Small', 'Medium', 'Large', 'Extra Large']
      }
    }
  }
</script>

<!-- b-form-input-datalist.vue -->

BootstrapVue は、オプションの配列から <datalist> をすばやく作成するためのフォームヘルパーコンポーネント <b-form-datalist> を提供しています。

注意

• データリストは、ブラウザの組み込みのオートコンプリートと連携して動作し、データリストのオプションが最初に表示され、その後にオートコンプリートのオプションが表示されます。データリストのオプションのみを表示するには、<b-form-input> で autocomplete="off" を設定します。
• データリストは、タイプが password、range、または color の入力フィールドには適用できません。
• すべてのブラウザが <datalist> を完全にサポートしているわけではなく、実装にバグがある可能性があります。データリストは拡張機能として扱い、現時点では依存しないことをお勧めします。すべてのブラウザでの完全なサポートの詳細については、Can I use を確認してください。

v-model 修飾子

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

この問題を回避するために、<b-form-input> には、ネイティブ Vue v-model 修飾子 .trim と .number および .lazy をエミュレートする 3 つのブール値 prop trim、number、および lazy があります。lazy prop は、change/blur イベントで v-model を更新します。

注意

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

デバウンスのサポート

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

デバウンスを有効にするには、prop debounce をゼロより大きい任意の整数に設定します。値はミリ秒単位で指定されます。debounce を 0 に設定すると、デバウンスが無効になります。

注意: lazy prop が設定されている場合、デバウンスは発生しません。

<template>
  <div>
    <b-form-input v-model="value" type="text" debounce="500"></b-form-input>
    <div class="mt-2">Value: "{{ value }}"</div>
  </div>
</template>

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

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

オートフォーカス

autofocus prop が設定されている場合、入力はドキュメントに挿入（つまり、マウント）されたとき、または Vue <keep-alive> コンポーネント内にあるときに再アクティブ化されたときに、自動的にフォーカスされます。この prop は、入力に autofocus 属性を設定するものではなく、入力がいつ表示されるかを判断することもできないことに注意してください。

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

すべてのネイティブイベント（カスタムの input および change イベント以外）は、.native 修飾子を必要とせずにサポートされています。

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

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

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

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

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

入力プロパティ

入力メソッド

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

HTML5 <input> を代替として使用する

基本的な Bootstrap スタイルを持つ単純な入力が必要な場合は、以下を使用するだけで済みます。

<template>
  <div>
    <input v-model="value" type="text" class="form-control">
    <br>
    <p>Value: "{{ value }}"</p>
  </div>
</template>

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

<!-- native-input.vue -->