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

<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"></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> </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> </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"></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(...)).

Свойства ввода

Методы ввода

Обратитесь к https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement для получения дополнительной информации об этих методах и свойствах. Поддержка будет зависеть от типа ввода.