1

Есть страница, на которой находятся два элемента textarea.

<textarea id="left"></textarea>
<textarea id="right"></textarea>

В Firefox, Safari и Chrome можно мышью изменять размеры этих элементов.

Нужно сделать так, чтобы была возможность подстраивать высоту поля ввода для обзора введённых данных, но при этом при изменении высоты одного элемента параллельно изменялась высота второго.

Предложил пока своё решение, но надеюсь, что есть решения лучше.

2
  • Интересно для чего такой "костыль" придумывать? Каким образом первый элемент связан со вторым?
    – Invision
    19 янв 2016 в 0:42
  • @Invision Данные в одном соответствуют данным в другом построчно, поэтому удобно при изменении высоты одного поля ввода изменять высоту другого. Добавил пример данных в ответе (к вопросу это не так сильно относится) 19 янв 2016 в 0:44

2 ответа 2

1

Нашёл ещё один способ. Условие следующее: запретить ручное изменение размера.

Можно сделать так, чтобы при добавлении новой строки в один из textarea, автоматически изменялась ширина у обоих элементов.

var left = document.getElementById("left");
var right = document.getElementById("right");

// функция для определения количества строк в textarea
var getRowsCount = function(area) {
  return area.value.split(/[\n\r]/).length;
}

// Задаём на одну строку больше, чтобы не прижиматься к краю 
//   и чтобы не появлялось полосы прокрутки
left.onkeyup = right.onkeyup = function() {
  var result_height = Math.max(getRowsCount(left), getRowsCount(right));
  left.rows = right.rows = result_height + 1;
}
textarea {
  /* запрещаем изменение размера мышью для ухода от багов */
  resize: none;
  /* можно также задать min|max-height для ограничений размеров */
}
<textarea id="left"></textarea>
<textarea id="right"></textarea>

Минусы:

  • Нужно либо фиксировать максимальную высоту, либо получить потенциально бесконечно растущее поле.
  • Пользователь не может вручную выбрать нужный размер поля.

Плюсы:

  • Размер полей изменяется автоматически в соответствии с максимальным заполнением.
  • Плавное изменение размеров.
0

Сейчас пока что есть такое решение:

var left_area = document.getElementById("left");
var right_area = document.getElementById("right");
left.onmousemove = function() {
  right.style.height = left.style.height;
}
right.onmousemove = function() {
  left.style.height = right.style.height;
}
<textarea id="left">1
2
3
4
5
6
7
8</textarea>
<textarea id="right">10
20
30
40
50
60
70
80</textarea>

Минусы:

  • При быстром увеличении высоты элемента не всегда срабатывает событие mousemove, из-за чего изменение второго элемента происходит скачкообразно.
  • Если сначала увеличить высоту одного поля, не всегда получается уменьшить высоту другого (воспроизводится, по крайней мере, в местной песочнице).
  • Работает только в Firefox, Safari и Chrome (не должно в IE, но негде проверить).

Плюсы:

  • Можно установить нужную удобную высоту поля.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.