表单输入框(Textual and Value inputs)

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

Value: 
<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> 默认为 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>

如果将 type 属性设置为不支持的输入类型（请参见上文），则将呈现 text 输入并发出控制台警告。

输入类型的警告：

  • 不是所有的浏览器都支持所有的输入类型，也不是所有的类型在不同的浏览器类型/版本中以相同的格式呈现。参考 caniuse.com 。
  • 不支持特定类型的浏览器将退回到 text 输入类型（即使呈现的 type 属性标记显示了请求的类型）。
  • 不执行测试以查看浏览器是否支持请求的输入类型。
  • Chrome 在版本 26 中失去了对 datetime 的支持，在版本 15 中失去了 Opera 的功能，而在 iOS 7 中失去了对 Safari 的支持。由于不赞成使用 datetime ，因此应弃用该支持，因此请使用 date 和 time 作为两个单独的输入。
  • date 和 time 输入是本机浏览器类型，而不是自定义日期/时间选择器。
  • 对于 date 和 time 样式输入（如果支持），GUI 中显示的值可能不同于其值返回的值（即，年-月-日的排序）。
  • 无论输入类型如何，该值 始终 以字符串表示形式返回。
  • <b-form-input>（也不包含任何自定义 Vue 组件）不支持 v-model.lazy 。 改用 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 不会更新。

范围类型输入

使用 Bootstrap v4 的 .custom-range 类进行类型 range【范围】呈示的输入。轨道（背景）和拇指（值）的样式都在浏览器中显示为相同。

范围输入的 min 和 max 隐式值分别为 0 和 100 。 您可以为使用 min 和 max 道具的人指定新值。

Value: 2
<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>

默认情况下，范围输入“snap”【捕捉】为整数值。要更改此设置，可以指定一个 step【步长】值。在下面的示例中，我们使用 step =“0.5” 将步骤数加倍。

Value: 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>

注意： 范围输入（与所有输入类型一样）以字符串形式返回其值。您可能需要通过使用 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>

注意： 输入类型 range【范围】当前不支持控件大小调整，除非将其放置在具有其 size 属性设置的 <b-input-group> 内。

注意： 不支持本机 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>

实例

Enter at least 3 letters
Your full name.
<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-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 事件触发时，就会发生格式化（提供格式化程序功能时）。您可以使用 boolean 属性 lazy-formatter 将格式化程序功能限制为在控件的本机 blur 事件上调用。

formatter【格式化】函数接收两个参数：输入元素的原始 value 和触发格式的本机 event 对象（如果有）。

formatter【格式化】函数应将格式化后的值作为 string 返回。

如果未提供格式化程序，则不会进行 formatter【格式化】。

We will convert your name to lowercase instantly

Value:

This one is a little lazy!

Value: 

<template>
  <div>
    <b-form-group
      class="mb-0"
      label="Text input with formatter (on input)"
      label-for="input-formatter"
      description="We will convert your name to lowercase instantly"
    >
      <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
      class="mb-0"
      label="Text input with lazy formatter (on blur)"
      label-for="input-lazy"
      description="This one is a little lazy!"
    >
      <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>

注意： 当使用非文本输入（例如 color ，range ，date ，number ，email 等）时，请确保格式化程序函数以预期的格式返回输入类型的值。格式化程序 必须 将值作为 string 返回。

注意： 对于非延迟格式，如果光标不在输入值的末尾，则键入字符后光标可能会跳到末尾。您可以使用提供的事件对象和 event.target 来访问本机输入的选择方法和属性，以控制插入点的位置。这留给读者练习。

只读纯文本

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

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

在 numeric-like 输入上禁用鼠标滚轮事件

在某些浏览器中，在聚焦类似数字的输入时滚动鼠标滚轮会增加或减少输入的值。要禁用此浏览器功能，只需将 no-wheel 属性设置为 true 。

数据列表支持

数据列表是本机HTML标记 <datalist> ，其中包含 <option> 标记列表。 通过为数据列表标签分配 ID ，可以通过添加 list 属性从文本输入中引用列表。

<template>
  <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>
</template>

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

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 and .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 事件返回的值不匹配）。

Debounce【防反跳】支持

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

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

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

Value: ""
<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>

自动获取焦点

设置自动对焦道具后，将其插入（即 安装 ）到文档中时将对其进行 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://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement 。支持将根据输入类型而变化。

使用 HTML5 <input> 作为替代

如果您只需要带有基本引导样式的简单输入，则可以使用以下命令：


Value: ""

<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>

组件引用

<b-form-input>

查看源代码

组件别名

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

  • <b-input>

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

属性

属性 (Click to sort Ascending) 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
name String 设置表单控件上“name”属性的值
disabled Boolean 设置为“true”时，禁用组件的功能并将其置于禁用状态
required Boolean false 将“required”属性添加到表单控件
form String 表单控件所属的表单的ID。在控件上设置“form”属性
autofocus Boolean false 设置为“true”时，尝试在安装控件时自动将其调焦，或者在 keep-alive【保持活动】状态时将其重新激活。未在控件上设置“autofocus”属性
size String 设置组件外观的大小。'sm'，'md'（默认）或'lg'
state Boolean 控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态
value v-model String or Number 输入的当前值。结果将始终为字符串，除非使用“number”道具
aria-invalid Boolean or String false 将 aria-invalid 属性设置为指定值
readonly Boolean false 在表单控件上设置“readonly”属性
plaintext Boolean false 将表单控件设置为只读，并使该控件看起来像纯文本（无边框）
autocomplete String 在表单控件上设置“autocomplete”属性值
placeholder String 在表单控件上设置“placeholder”属性值
formatter Function 引用用于格式化输入的函数
lazy-formatter Boolean false 设置后，输入将在 blur 失焦而不是每次击键时进行格式化（如果指定了格式化程序）
trim Boolean false 设置后，从输入值中修剪所有前导和尾随空白。模拟 Vue '.trim' v-model 修改器
number Boolean false 设置时，尝试将输入值转换为本地数字。模拟Vue'.number' v-model 修改器
lazy v2.1.0+ Boolean false 设置后，在'change'/'blur'事件而不是'input'上更新v模型。模拟 Vue '.lazy' v-model 修改器
debounce v2.1.0+ Number or String 0 设置为大于零的毫秒数时，将消除用户输入的反跳。如果设置了属性“lazy”，则无效
type String 'text' 要呈现的输入的类型。 有关支持的类型，请参阅文档
no-wheel Boolean false 对于类似数字的输入，请禁用鼠标滚轮以增加或减少值
min String or Number 在输入的'min'属性中设置的值。由类似数字的输入使用
max String or Number 要在输入的“max”属性中设置的值。由类似数字的输入使用
step String or Number 在输入的“step”属性中设置的值。由 number-like【类似数字】的输入使用
list String 关联的数据列表元素或组件的ID

v-model

属性 事件
value update

事件

事件 参数 描述
input
  1. value - 输入的当前值
 用户交互触发的输入事件。在任何格式（不包括“trim”或“number”属性）之后以及更新 v-model 后发出
change
  1. value - 输入的当前值
 由用户交互触发的更改事件。在任何格式（不包括'trim'或'number'属性）和 v-model 更新后发出。
update
  1. value - 任何格式后的输入值。如果值不变，则不发出
 发出以更新 v-model
blur
  1. event - 本地 blur 事件（任何格式之前）
 输入失去焦点后发出

导入单个组件

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

组件 命名输出 导入路径
<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)