JavaScript | Как изменить количество отображаемых строк(рядов) в HTML-элементе textarea?

У нас есть простой документ со скриптом, в котором мы создали HTML-элемент textarea силами JavaScript:

let te = document.createElement(‘textarea’);

te.setAttribute(‘id’, ‘te’);

let h1 = document.getElementsByTagName(‘h1’)[0];

h1.after(te);

</script>

Созданный элемент текстовой области выглядит таким образом:

HTML-элемент textarea с двумя линиями строки

По умолчанию элемент textarea создаётся высотой ровно в две линии строки. Имеется ввиду, что в поле textarea есть одна строка JavaScript с символом переноса строки — U+000A LINE FEED (LF). В результате две линии для одной строки JavaScript.

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

Появился вертикальный скролл для HTML-элемента textarea на странице

Скролл настолько маленький, что при большом количестве линий им будет невозможно пользоваться. Сложно будет попадать на нужный участок текста. Конечно, никто не запрещает пользователю потянуть за правый нижний уголок элемента текстовой области, чтобы увеличить отображаемый вид. Но не каждый пользователь догадается это сделать, а во-вторых это нужно будет делать при каждом обновлении страницы. Очень неудобно.

Как увеличить количество визуальных линий для ввода строки в HTML-элемент textarea?

Установка атрибута rows для HTML-элемент textarea при помощи JavaScript и метода setAttribute()

Согласно документации HTML, элемент textarea может иметь 13 собственных атрибутов для настройки. Нужный нам атрибут называется rows (в переводе на русский — ряды, но я буду называть их линиями).

Атрибут rows отвечает за количество линий для отображения.

Чтобы изменить количество линий в текущей текстовой области, нам нужно сначала получить сам объект textarea и уже у него вызвать метод setAttribute() с параметрами ‘rows‘ и 10.

document.querySelector("#te").setAttribute('rows', 10)

или напрямую к одноимённому свойству объекта

document.querySelector("#te").rows = 10

Увеличили количество линий строки в HTML-элементе textarea до 10 штук - JavaScript — Увеличили количество линий строки в HTML-элементе textarea до 10 штук — JavaScript

После установки атрибута HTML в нужное значение, происходит перерисовка текстовой области и она растягивается вертикально ещё на 8 линий.

Ровно 10 линий строки в текстовой области элемента textarea на странице

Браузер успешно изменяет отображение страницы и задача выполняется. Теперь текстовая область стала больше по площади и текст читается гораздо лучше.

Даже если мы добавим ещё пару линий, то скролл не будет промахиваться. Движение скролла будет плавным и понятным.

Добавили линий строки в увеличенную текстовую область textarea для получения нормального скролла

Задача решена.

Информационные ссылки

DOM — Раздел «Interface Document» — https://dom.spec.whatwg.org/#interface-document

DOM — Раздел «Mixin ChildNode» — https://dom.spec.whatwg.org/#interface-childnode

HTML | Элемент textarea

HTML — Раздел «The textarea element» — https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element