Поле ввода формы

<template>
  <div>
    <b-form-input v-model="text" placeholder="Введите ваше имя"></b-form-input>
    <div class="mt-2">Значение: </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}`">Тип <code></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 потерял поддержку datetime в версии 26, Opera в версии 15, а Safari в iOS 7. Вместо использования datetime, поскольку поддержка должна быть прекращена, используйте date и time как два отдельных входа.
• Вводы date и time являются собственными типами браузера и не являются настраиваемым средством выбора даты/времени.
• Для входных данных в стиле даты и времени, если они поддерживаются, отображаемое значение в графическом интерфейсе пользователя может отличаться от того, что возвращается его значением (т. е. порядок год-месяц-дата).
• Независимо от типа ввода значение всегда возвращается в виде строкового представления.
• v-model.lazy не поддерживается <b-form-input> (ни каким-либо пользовательским компонентом Vue). Вместо этого используйте опцию lazy.
• Модификаторы v-model, .number и .trim могут вызывать неожиданные скачки курсора, когда пользователь вводит текст (это проблема Vue v-model на пользовательских компонентах). Избегайте использования этих модификаторов. Вместо этого используйте свойства number или trim.
• Более старая версия Firefox может не поддерживать readonly для входных данных типа range.
• Типы ввода, которые не поддерживают 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">Пример диапазона с минимальным и максимальным</label>
    <b-form-input id="range-1" v-model="value" type="range" min="0" max="5"></b-form-input>
    <div class="mt-2">Значение: </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">Пример диапазона со значением шага</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">Значение: </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.

Примечание: CSS Bootstrap v4 не включает стили для входных данных диапазона внутри групп ввода, а также стиль проверки для входных данных диапазона. Однако BootstrapVue включает настраиваемые стили для обработки этих ситуаций, пока они не будут включены в Bootstrap v4.

Размер контролов

Установите высоту, используя свойство size на sm или lg для малых или больших соответственно.

Чтобы контролировать ширину, поместите ввод внутри стандартного столбца сетки Bootstrap.

<b-container fluid>
  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-small">Маленький:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-small" size="sm" placeholder="Введите ваше имя"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-default">По умолчанию:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-default" placeholder="Введите ваше имя"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-large">Большой:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-large" size="lg" placeholder="Введите ваше имя"></b-form-input>
    </b-col>
  </b-row>
</b-container>

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

Примечание: Тип ввода range в настоящее время не поддерживает изменение размера элемента управления, если он не помещен в <b-input-group>, у которого установлено его свойство size.

Примечание: Нативный атрибут HTML size поля ввода <input> (который устанавливает горизонтальную ширину для <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">Без состояния:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-none" :state="null" placeholder="Без валидации"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-valid">Валидное состояние:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-valid" :state="true" placeholder="Корректный ввод"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-invalid">Невалидное состояние:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-invalid" :state="false" placeholder="Некорректный ввод"></b-form-input>
    </b-col>
  </b-row>
</b-container>

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

Живой пример

<template>
  <div role="group">
    <label for="input-live">Имя:</label>
    <b-form-input
      id="input-live"
      v-model="name"
      :state="nameState"
      aria-describedby="input-live-help input-live-feedback"
      placeholder="Введите ваше имя"
      trim
    ></b-form-input>

    <!-- Это будет показано только в том случае, если предыдущий ввод имеет недопустимое состояние -->
    <b-form-invalid-feedback id="input-live-feedback">
      Введите не менее 3 букв
    </b-form-invalid-feedback>

    <!-- Это текстовый блок формы (ранее известный как блок справки) -->
    <b-form-text id="input-live-help">Ваше полное имя.</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), вы также можете захотеть установить для свойства aria-invalid для <b-form-input> значение 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 должна возвращать отформатированное значение как строка.

Форматирование не происходит, если не предоставлено средство форматирования formatter.

<template>
  <div>
    <b-form-group
      label="Ввод текста с помощью средства форматирования (при вводе)"
      label-for="input-formatter"
      description="Мы мгновенно переведем ваше имя в нижний регистр"
      class="mb-0"
    >
      <b-form-input
        id="input-formatter"
        v-model="text1"
        placeholder="Введите ваше имя"
        :formatter="formatter"
      ></b-form-input>
    </b-form-group>
    <p><b>Значение:</b> </p>

    <b-form-group
      label="Ввод текста с отложенным форматированием (при размытии)"
      label-for="input-lazy"
      description="Этот немного отложен!"
      class="mb-0"
    >
      <b-form-input
        id="input-lazy"
        v-model="text2"
        placeholder="Введите ваше имя"
        lazy-formatter
        :formatter="formatter"
      ></b-form-input>
    </b-form-group>
    <p class="mb-0"><b>Значение:</b> </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 (нет необходимости устанавливать readonly), чтобы удалить стиль поля формы по умолчанию и сохранить правильный поля и отступы.

Опция plaintext не поддерживается типами ввода color или range.

Отключение событий колесика мыши для числовых входов

В некоторых браузерах прокрутка колесика мыши при фокусировке числового ввода будет увеличивать или уменьшать значение ввода. Чтобы отключить эту функцию браузера, просто установите для свойства no-wheel значение true.

Поддержка Datalist

Списки данных - это собственный HTML-тег <datalist>, который содержит список тегов <option>. Путем присвоения идентификатора тегу datalist список может быть ссылками из текстового ввода путем добавления атрибута list.

Это придает вводу поведение поля со списком или автозаполнения, позволяя выбирать существующие значения или вводить новые значения.

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

    <datalist id="my-list-id">
      <option>Ручной вариант</option>
      <option v-for="size in sizes"></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> из массива параметров.

Примечания:

• Списки данных работают вместе со встроенной функцией автозаполнения браузера, сначала отображая опции списка данных, а затем опции автозаполнения. Чтобы отображать только параметры списка данных, установите autocomplete="off" в <b-form-input>.
• Списки данных нельзя применять к полям ввода с типом password, range или color.
• Не все браузеры полностью поддерживают <datalist>, и реализации могут содержать ошибки. Рекомендуется рассматривать списки данных как расширение и не полагаться на них в настоящее время. Проверьте Can I use для получения полной информации о поддержке во всех браузерах.

Модификаторы v-model

Vue официально не поддерживает модификаторы .lazy, .trim и .number в v-model входных данных на основе настраиваемых компонентов и может создавать неудобства для пользователей. Избегайте использования собственных модификаторов Vue.

Чтобы обойти это, в <b-form-input> есть три логических свойства trim, numberи lazy, которые имитируют нативные модификаторы v-model Vue: .trim и .number и .lazy соответственно. Свойство lazy будет обновлять v-model при событиях change/blur.

Примечания:

• Свойство number имеет приоритет перед свойством trim (то есть trim не будет иметь никакого эффекта, если установлено number).
• При использовании свойства number, и если значение может быть проанализировано как число (через parseFloat), оно вернет значение типа Number в v-model, в противном случае возвращается исходное входное значение как тип String. Это то же самое поведение, что и нативный модификатор .number.
• Свойства модификаторов trim и number не влияют на значение, возвращаемое событиями input или change. Эти события всегда будут возвращать строковое значение содержимого <textarea> после необязательного форматирования (которое может не соответствовать значению, возвращаемому через событие update v-model, которое обрабатывает модификаторы).

Поддержка Debounce

В качестве альтернативы свойства модификатора lazy, <b-form-input> опционально поддерживает отладку пользовательского ввода, обновляя v-model после периода простоя с момента, когда последний символ был введен пользователем ( или происходит событие change). Если пользователь вводит новый символ (или удаляет символы) до истечения тайм-аута простоя, тайм-аут запускается повторно.

Чтобы включить debouncing, установите для свойства debounce любое целое число больше нуля. Значение указывается в миллисекундах. Установка debounce на 0 отключит debouncing.

Примечание: устранение неполадок не произойдет, если установлено свойство lazy.

<template>
  <div>
    <b-form-input v-model="value" type="text" debounce="500"></b-form-input>
    <div class="mt-2">Значение: ""</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 по мере необходимости).

Вы всегда можете получить доступ к собственным событиям input и change, используя модификатор .native.

Открытые свойства и методы полей ввода

<b-form-input> предоставляет несколько свойств и методов встроенного элемента ввода в ссылке на компонент (т. е. присваивает ref вашему <b-form-input ref="foo" ...> и используйте this.$refs['foo'].propertyName или this.$refs['foo'].methodName(...)).

Свойства полей ввода

Методы полей ввода

Обратитесь к 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>Значение: ""</p>
  </div>
</template>

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

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