HTMLTextAreaElement

Интерфейс HTMLTextAreaElement предоставляет специальные свойства и методы для управления макетом и представлением элементов <textarea>.

Также наследует свойства от родительского интерфейса, HTMLElement.

autocomplete

Строка, представляющая атрибут autocomplete элемента.

cols

Число, представляющее атрибут cols элемента, указывающее видимую ширину текстовой области.

defaultValue

Строка, представляющая значение по умолчанию элемента управления, которое ведет себя как свойство Node.textContent.

dirName

Строка, представляющая направление элемента.

disabled

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

form Только для чтения

Возвращает ссылку на родительский элемент формы. Если этот элемент не содержится в элементе формы, он может быть атрибутом id любого элемента <form> в том же документе или значением null.

labels Только для чтения

Возвращает список NodeList элементов <label>, связанных с этим элементом.

maxLength

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

minLength

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

name

Строка, представляющая атрибут name элемента, содержащая имя элемента управления.

placeholder

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

readOnly

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

required

Булево значение, представляющее атрибут required элемента, указывающее, что пользователь должен указать значение перед отправкой формы.

rows

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

selectionDirection

Строка, представляющая направление, в котором произошло выделение. Это forward если выделение производилось в направлении от начала к концу текущего региона, или backward для обратного направления. Это также может быть none если направление неизвестно.

selectionEnd

Число, представляющее индекс конца выделенного текста. Если текст не выделен, содержит индекс символа, следующего за курсором ввода. При установке элемент управления ведет себя так, как если бы была вызвана функция setSelectionRange() с этим значением в качестве второго аргумента, а selectionStart - в качестве первого.

selectionStart

Число, представляющее индекс начала выделенного текста. Если текст не выделен, содержит индекс символа, следующего за курсором ввода. При установке элемент управления ведет себя так, как если бы была вызвана функция setSelectionRange() с этим значением в качестве первого аргумента и selectionEnd в качестве второго.

textLength Только для чтения

Возвращает количество кодовых точек в элементе управления. То же, что и чтение value.length.

type Только для чтения

Возвращает строку textarea.

validationMessage Только для чтения

Возвращает локализованное сообщение, описывающее ограничения валидации, которым не удовлетворяет элемент управления (если таковые имеются). Это пустая строка, если элемент управления не является кандидатом для валидации ограничений (willValidate - false), или он удовлетворяет своим ограничениям.

validity Только для чтения

Возвращает состояние валидности этого элемента.

value

Строка, представляющая исходное значение, содержащееся в элементе управления.

willValidate Только для чтения

Возвращает, является ли элемент кандидатом для валидации ограничений. false если какие-либо условия не позволяют ему выполнять валидацию ограничений, включая его свойство readOnly или disabled равно true.

wrap

Строка, представляющая атрибут wrap элемента, указывающая, как элемент управления переносит текст.

Также наследует методы от родительского интерфейса, HTMLElement.

checkValidity()

Возвращает false , если элемент может быть проверен на соответствие ограничениям и не удовлетворяет им. В этом случае он также вызывает отменяемое событие invalid в элементе управления. Возвращает true , если элемент управления не может быть проверен на соответствие ограничениям или если он им удовлетворяет.

reportValidity()

Этот метод сообщает пользователю о проблемах с ограничениями элемента, если таковые имеются. Если проблемы есть, он вызывает отменяемое событие invalid в элементе и возвращает false; если проблем нет, возвращает true.

select()

Выделяет содержимое элемента управления.

setCustomValidity()

Устанавливает пользовательское сообщение об ошибке валидации для элемента. Если это сообщение не пустое, то у элемента есть ошибка пользовательской валидации и он не проходит валидацию.

setRangeText()

Заменяет диапазон текста в элементе новым текстом.

setSelectionRange()

Выделяет диапазон текста в элементе (но не фокусирует его).

Также наследует события от родительского интерфейса, HTMLElement.

Прислушивайтесь к этим событиям, используя addEventListener() или назначив обработчик событий свойству oneventname этого интерфейса:

select событие

Срабатывает, когда какой-то текст был выделен.

selectionchange событие Экспериментально

Срабатывает, когда выделение текста в элементе <textarea> было изменено.

Сделайте область ввода (textarea) автопрокручивающейся при вводе текста:

JavaScript

function autoGrow(field) {
  if (field.scrollHeight > field.clientHeight) {
    field.style.height = `${field.scrollHeight}px`;
  }
}

CSS

textarea.no-scrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

<form>
  <fieldset>
    <legend>Your comments</legend>
    <p><textarea class="no-scrollbars" onkeyup="autoGrow(this);"></textarea></p>
    <p><input type="submit" value="Send" /></p>
  </fieldset>
</form>

Вставьте некоторые HTML-теги в область ввода (textarea).

JavaScript

function insert(startTag, endTag) {
  const textArea = document.myForm.myTxtArea;
  const selectionStart = textArea.selectionStart;
  const selectionEnd = textArea.selectionEnd;
  const oldText = textArea.value;

  const prefix = oldText.substring(0, selectionStart);
  const inserted =
    startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
  const suffix = oldText.substring(selectionEnd);
  textArea.value = `${prefix}${inserted}${suffix}`;

  const newSelectionStart = selectionStart + startTag.length;
  const newSelectionEnd = selectionEnd + startTag.length;
  textArea.setSelectionRange(newSelectionStart, newSelectionEnd);

  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Enter the full URL for the link");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTxtArea.focus();
  }
}

const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");

strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("\n<code>\n", "\n</code>\n"));

CSS

CSS для оформления внутреннего span, чтобы он вел себя как ссылка:

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: #0000ff;
}

HTML:

<form name="myForm">
  <p>
    [&nbsp;
    <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
    <span class="intLink" id="format-em"><em>Italic</em></span> |
    <span class="intLink" id="format-link">URL</span> |
    <span class="intLink" id="format-code">code</span> &nbsp;]
  </p>

  <p>
    <textarea name="myTxtArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
    </textarea>
  </p>
</form>