Текстовая область формы

Создавайте многострочные текстовые поля ввода с поддержкой автоматического изменения размера, минимального и максимального количества строк и контекстных состояний.

<template>
  <div>
    <b-form-textarea
      id="textarea"
      v-model="text"
      placeholder="Введите что-нибудь..."
      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">Маленький:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-small"
        size="sm"
        placeholder="Маленькая текстовая область"
      ></b-form-textarea>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-default">По умолчанию:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-default"
        placeholder="Текстовая область по умолчанию"
      ></b-form-textarea>
    </b-col>
  </b-row>

  <b-row class="mt-2">
    <b-col sm="2">
      <label for="textarea-large">Большой:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-large"
        size="lg"
        placeholder="Большая текстовая область"
      ></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="Высокое текстовое поле"
    rows="8"
  ></b-form-textarea>
</div>

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

Отключить маркер изменения размера

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

<div>
  <b-form-textarea
    id="textarea-no-resize"
    placeholder="Текстовое поле с фиксированной высотой"
    rows="3"
    no-resize
  ></b-form-textarea>
</div>

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

Автоматическая высота

<b-form-textarea> также может автоматически регулировать свою высоту (текстовые строки) в соответствии с содержимым, даже когда пользователь вводит или удаляет текст. Высота текстового поля будет либо увеличиваться, либо уменьшаться, чтобы соответствовать содержимому (увеличиваться до максимума max-rows или уменьшаться до минимального rows).

Чтобы установить начальную минимальную высоту (в строках), установите свойство rows на желаемое количество строк (или оставьте значение по умолчанию 2), а затем установите максимальное количество строк, до которых будет увеличиваться текстовая область (до показывая полосу прокрутки), установив для свойства max-rows максимальное количество строк текста.

Чтобы сделать высоту sticky (т.е. никогда не уменьшаться), установите для свойства no-auto-shrink значение true. Свойства no-auto-shrink не действуют, если max-rows не задано или равно или меньше rows.

Обратите внимание, что дескриптор изменения размера текстового поля (если он поддерживается браузером) будет автоматически отключен в режиме автоматической высоты.

<b-container fluid>
  <b-row>
    <b-col sm="2">
      <label for="textarea-auto-height">Автоматическая высота:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-auto-height"
        placeholder="Текстовое поле с автоматической высотой"
        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">Без автоматического сжатия:</label>
    </b-col>
    <b-col sm="10">
      <b-form-textarea
        id="textarea-no-auto-shrink"
        placeholder="Текстовое поле с автоматической высотой (без сжатия)"
        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 (либо изначально, либо через a polyfill), то <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="Введите не менее 10 символов"
      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> имеет недопустимое контекстное состояние (т.е. состояние 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, который инициировал форматирование (если доступно).

Функция formatter должна возвращать отформатированное значение как строка.

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

<template>
  <div>
    <b-form-group
      label="Текстовая область с форматеров (при вводе)"
      label-for="textarea-formatter"
      description="Мы мгновенно переведем ваш текст в нижний регистр"
      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>Значение:</b> {{ text1 }}</p>

    <b-form-group
      label="Текстовая область с отложенным форматеров (при блюре)"
      label-for="textarea-lazy"
      description="Этот немного поленился!"
      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>Значение:</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: "Это какой-то текст.\nОн доступен только для чтения и не похож на ввод."
      }
    }
  }
</script>

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

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

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

Чтобы обойти это, в <b-form-textarea> есть три логических свойства trim, number и lazy, которые имитируют встроенные модификаторы Vue v-model .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-textarea> опционально поддерживает отладку пользовательского ввода, обновляя v-model после периода простоя с момента, когда последний символ был введен пользователем ( или происходит событие change). Если пользователь вводит новый символ (или удаляет символы) до истечения тайм-аута простоя, тайм-аут запускается повторно.

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

Примечание: устранение неполадок не произойдет, если установлено свойство 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>, текстовое поле будет автоматически сфокусировано, когда оно вставлено (т.е. mounted) в документ или повторно активировано, когда оно находится внутри компонента Vue <keep-alive>. Обратите внимание, что это свойство не устанавливает атрибут autofocus в текстовом поле и не может определить, когда текстовое поле станет видимым.

Собственные и пользовательские события

Поддерживаются все собственные события (кроме настраиваемых событий input и change) без модификатора .native.

Пользовательские события input и change получают единственный аргумент текущего значения value (после применения любого форматирования) и запускаются при взаимодействии с пользователем.

Пользовательские события update передается входное значение, и оно генерируется всякий раз, когда v-model нуждается в обновлении (оно генерируется перед input, change и blur по мере необходимости).

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

Открытые входные свойства и методы

<b-form-textarea> предоставляет несколько свойств и методов встроенного элемента ввода в ссылке на компонент (т.е. присваивает ref вашему <b-form-textarea ref="foo" ...> и используйте 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-textarea>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
aria-invalid
Boolean или StringfalseУстанавливает атрибут 'aria-invalid' с указанным значением
autocomplete
StringУстанавливает значение атрибута 'autocomplete' в элементе управления формы
autofocus
BooleanfalseЕсли установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
debounce
v2.1.0+
Number или String0Если установлено количество миллисекунд больше нуля, пользовательский ввод будет подавлен. Не действует, если задано свойство 'lazy'
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
form
StringИдентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
formatter
FunctionСсылка на функцию форматирования текстового поля
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
lazy
v2.1.0+
BooleanfalseЕсли установлено, обновляет v-модель при событиях 'change'/'blur' вместо 'input'. Эмулирует модификатор Vue v-model '.lazy'
lazy-formatter
BooleanfalseЕсли установлено, текстовое поле форматируется при размытии вместо каждого нажатия клавиши (если указано средство форматирования)
max-rows
Number или StringМаксимальное количество отображаемых строк. Если предоставляется, текстовое поле будет увеличиваться (или уменьшаться), чтобы соответствовать содержимому до максимального количества строк
name
StringУстанавливает значение атрибута `name` в элементе управления формы
no-auto-shrink
BooleanfalseЕсли задано, предотвращает сжатие текстового поля с автоматической высотой, чтобы оно соответствовало содержимому
no-resize
BooleanfalseЕсли установлено, отключен дескриптор изменения размера браузера, который не позволяет пользователю изменять высоту текстового поля. Автоматически устанавливается в режиме автоматической высоты
number
BooleanfalseПри установке пытается преобразовать входное значение в собственное число. Эмулирует модификатор Vue '.number' v-model
placeholder
StringУстанавливает значение атрибута `placeholder` в элементе управления формы
plaintext
BooleanfalseУстанавливает элемент управления формы как только для чтения и визуализируйте элемент управления как обычный текст (без границ)
readonly
BooleanfalseУстанавливает атрибут `readonly` в элементе управления формы
required
BooleanfalseДобавляет атрибут `required` в элемент управления формы
rows
Number или String2Минимальное количество отображаемых строк. Должно быть значение больше 1
size
StringУстановите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
state
BooleannullУправляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
trim
BooleanfalseЕсли установлено, обрезает все начальные и конечные пробелы входного значения. Эмулирует модификатор Vue '.trim' v-model
value
v-model
Number или String''Текущее значение textarea. Результат всегда будет строкой, за исключением случаев, когда используется свойство 'number'
wrap
String'soft'Значение, которое нужно разместить в атрибуте 'wrap' текстового поля. Управляет возвратом разрыва строки

v-model

Свойство
Событие
valueupdate

События

Событие
Аргументы
Описание
blur
  1. event - Собственное событие размытия (до того, как произойдет какое-либо дополнительное форматирование)
Генерируется после того, как текстовое поле теряет фокус
change
  1. value - Текущее значение текстового поля
Событие ввода, вызванное взаимодействием с пользователем. Генерируется после любого форматирования (не включая свойства 'trim' или 'number') и после обновления v-model
input
  1. value - Текущее значение текстового поля
Событие изменения, вызванное взаимодействием с пользователем. Генерируется после любого форматирования (не включая свойства 'trim' или 'number') и после обновления v-model
update
  1. value - Значение textarea после любого форматирования. Не генерируется, если значение не меняется
Выпущено для обновления v-model

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-form-textarea>BFormTextareabootstrap-vue

Пример:

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

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
FormTextareaPluginbootstrap-vue

Пример:

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