表单输入

创建各种类型的输入，例如：text、password、number、url、email、search、range、date 等。

<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 作为两个单独的输入使用。
date 和 time 输入是原生浏览器类型，而不是自定义日期/时间选择器。
对于日期和时间样式输入，如果受支持，GUI 中显示的值可能与它的值返回的值不同（例如，年-月-日的顺序）。
无论输入类型如何，该值始终以字符串形式返回。
v-model.lazy 不受 <b-form-input>（或任何自定义 Vue 组件）支持。请改用 lazy 属性。
v-model 修饰符 .number 和 .trim 可能会在用户键入时导致意外的光标跳动（这是 Vue 在自定义组件上使用 v-model 时出现的一个问题）。避免使用这些修饰符。请改用 number 或 trim 属性。
较旧版本的 Firefox 可能不支持 range 类型输入的 readonly。
不支持 min、max 和 step 的输入类型（例如，text、password、tel、email、url 等）如果提供了值，将静默忽略这些值（尽管它们仍将在输入标记上呈现）。

预测性文本输入和 IME 组合输入的注意事项

使用预测性文本自动建议的单词时，v-model 不会更新，直到选择自动建议的单词（或键入空格）。如果未选择自动建议的单词，则当输入失焦时，v-model 将使用输入的当前显示文本进行更新。
使用 IME 组合（例如，中文、日文等）时，v-model 不会更新，直到 IME 组合完成。

范围类型输入

类型为 range 的输入使用 Bootstrap v4 的 .custom-range 类进行呈现。轨道（背景）和拇指（值）都被设计为在所有浏览器中都显示相同。

范围输入具有 min 和 max 的隐式值，分别为 0 和 100。你可以使用 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" 将步数加倍。

<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> 上应用其中一个上下文状态图标，请将 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> 具有无效的上下文状态（即状态为 false）时，您可能还想将 <b-form-input> 属性 aria-invalid 设置为 true，或设置为受支持的值之一

false：传达未检测到错误（默认）
true（或 'true'）：传达该值未通过验证。
'grammar'：传达已检测到语法错误。
'spelling'：传达已检测到拼写错误。

如果 aria-invalid 未明确设置，且 state 设置为 false，则输入上的 aria-invalid 属性将自动设置为 'true'；

格式化程序支持

<b-form-input> 可通过将函数引用传递给 formatter 属性来选择性地支持格式化。

格式化（在提供格式化程序函数时）在控件的原生 input 和 change 事件触发时发生。您可以使用布尔属性 lazy-formatter 将格式化程序函数限制为在控件的原生 blur 事件上调用。

formatter 函数接收两个参数：输入元素的原始 value 和触发格式化的原生 event 对象（如果可用）。

formatter 函数应返回格式化后的值，类型为 string。

如果未提供 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' 等）。格式化器必须将值作为 string 返回。

注意：在非惰性格式化中，如果光标不在输入值末尾，则在键入一个字符后，光标可能会跳到末尾。你可以使用提供的事件对象和 event.target 访问原生输入的选择方法和属性，以控制插入点的位置。这留给读者作为练习。

只读纯文本

如果你希望在表单中将 <b-form-input readonly> 元素样式化为纯文本，请设置 plaintext 属性（无需设置 readonly），以移除默认表单字段样式并保留正确的边距和填充。

输入类型 color 或 range 不支持 plaintext 选项。

禁用数字类输入上的鼠标滚轮事件

在某些浏览器中，当数字类输入获得焦点时滚动鼠标滚轮会增加或减少输入的值。要禁用此浏览器功能，只需将 no-wheel 属性设置为 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 提供表单辅助组件 <b-form-datalist>，用于根据选项数组快速创建 <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> 有三个布尔属性 trim、number 和 lazy，它们分别模拟原生 Vue v-model 修饰符 .trim 和 .number 以及 .lazy。lazy 属性将在 change/blur 事件上更新 v-model。

注释

number 属性优先于 trim 属性（即当设置 number 时，trim 不起作用）。
当使用 number 属性时，如果可以将值解析为数字（通过 parseFloat），它将向 v-model 返回类型为 Number 的值，否则将原始输入值作为类型 String 返回。这与原生 .number 修饰符的行为相同。
trim 和 number 修饰符属性不影响 input 或 change 事件返回的值。这些事件始终会返回 <textarea> 内容的字符串值，经过可选的格式化（可能与通过 v-model update 事件返回的值不匹配，该事件处理修饰符）。

防抖支持

作为 lazy 修饰符属性的替代方案，<b-form-input> 可选择支持防抖用户输入，在用户输入最后一个字符后的一段时间内（或发生 change 事件时）更新 v-model。如果用户在空闲超时到期之前输入新字符（或删除字符），则超时将重新开始。

要启用防抖，将属性 debounce 设置为大于零的任何整数。该值以毫秒为单位指定。将 debounce 设置为 0 将禁用防抖。

注意：如果设置了 lazy 属性，则不会发生防抖。

<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 属性时，在将输入插入（即挂载）到文档中或在 Vue <keep-alive> 组件中重新激活时，将自动聚焦输入。请注意，此属性不会在输入上设置 autofocus 属性，也无法判断何时输入可见。

原生事件和自定义事件

支持所有原生事件（除了自定义 input 和 change 事件）而无需 .native 修饰符。

自定义 input 和 change 事件接收当前 value 的单个参数（在应用任何格式化后），并由用户交互触发。

自定义 update 事件会传递输入值，并在 v-model 需要更新时发出（在 input、change 和 blur 根据需要发出之前发出）。

始终可以使用 .native 修饰符访问本机 input 和 change 事件。

公开的输入属性和方法

<b-form-input> 在组件引用上公开本机输入元素的多个属性和方法（即为 <b-form-input 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://mdn.org.cn/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 -->

组件引用

`<b-form-input>`

查看源代码

<b-form-input> 组件别名
<b-form-input> 属性
<b-form-input> v-model
<b-form-input> 事件

组件别名

<b-form-input> 还可以通过以下别名使用

<b-input>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性的默认值均可全局配置。

属性 (点击按升序排序)	类型 (点击按升序排序)	默认值	描述
`aria-invalid`	`布尔值` 或 `字符串`	`false`	使用指定值设置“aria-invalid”属性
`autocomplete`	`字符串`		设置表单控件上的“autocomplete”属性值
`autofocus`	`布尔值`	`false`	设置为 `true` 时，尝试在控件装载时自动聚焦该控件，或在处于保持活动状态时重新激活该控件。不会在控件上设置 `autofocus` 属性
`debounce` v2.1.0+	`数字` 或 `字符串`	`0`	如果设置为大于零的毫秒数，则会抑制用户输入。如果设置了 prop 'lazy'，则不起作用
`disabled`	`布尔值`	`false`	设置为 `true` 时，禁用组件的功能并将其置于禁用状态
`form`	`字符串`		表单控件所属的表单的 ID。在控件上设置 `form` 属性
`formatter`	`函数`		用于格式化输入的函数的引用
`id`	`字符串`		用于设置呈现内容上的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`lazy` v2.1.0+	`布尔值`	`false`	设置后，在“change”/“blur”事件上更新 v-model，而不是在“input”事件上更新。模拟 Vue '.lazy' v-model 修饰符
`lazy-formatter`	`布尔值`	`false`	设置后，在失去焦点时格式化输入，而不是在每次击键时格式化（如果指定了格式化程序）
`list`	`字符串`		关联的 datalist 元素或组件的 ID
`max`	`数字` 或 `字符串`		在输入上设置“max”属性中的值。数字类输入使用
`min`	`数字` 或 `字符串`		在输入上设置“min”属性中的值。数字类输入使用
`name`	`字符串`		设置表单控件上 `name` 属性的值
`no-wheel`	`布尔值`	`false`	对于数字类输入，禁用鼠标滚轮增大或减小值
`number`	`布尔值`	`false`	设置后，尝试将输入值转换为本机数字。模拟 Vue '.number' v-model 修饰符
`placeholder`	`字符串`		设置表单控件上的 `placeholder` 属性值
`纯文本`	`布尔值`	`false`	将表单控件设置为只读，并渲染控件使其看起来像纯文本（无边框）
`只读`	`布尔值`	`false`	在表单控件上设置 `readonly` 属性
`必需`	`布尔值`	`false`	将 `required` 属性添加到表单控件
`大小`	`字符串`		设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`状态`	`布尔值`	`null`	控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，`null` 表示没有验证状态
`步长`	`数字` 或 `字符串`		在输入的 'step' 属性中设置的值。数字型输入使用
`修剪`	`布尔值`	`false`	设置后，修剪输入值中的所有前导和尾随空白。模拟 Vue '.trim' v-model 修饰符
`类型`	`字符串`	`'text'`	要渲染的输入类型。有关支持的类型，请参阅文档
`值` v-model	`数字` 或 `字符串`	`''`	输入的当前值。结果始终为字符串，除非使用了 `number` 属性

`v-model`

属性	事件
`值`	`更新`

事件

事件	参数	描述
`模糊`	`event` - 原生模糊事件（在任何格式化之前）	在输入失去焦点后发出
`更改`	`value` - 输入的当前值	由用户交互触发的更改事件。在任何格式化（不包括 'trim' 或 'number' 属性）和 v-model 更新后发出
`输入`	`value` - 输入的当前值	由用户交互触发的输入事件。在任何格式化（不包括 'trim' 或 'number' 属性）和 v-model 更新后发出
`更新`	`value` - 输入的值，在进行任何格式化之后。如果值没有更改，则不会发出	发出以更新 v-model

导入单个组件

你可以通过以下命名导出将单个组件导入到你的项目中

组件	命名导出	导入路径
`<b-form-input>`	`BFormInput`	`bootstrap-vue`

示例

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

作为 Vue.js 插件导入

此插件包含上面列出的所有单个组件。插件还包括任何组件别名。

命名导出	导入路径
`FormInputPlugin`	`bootstrap-vue`

示例

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