There is a page that has two textarea elements.

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

In Firefox, Safari and Chrome, you can resize these elements with the mouse.

It is necessary to make it so that it was possible to adjust the height of the input field to review the entered data, but at the same time, when the height of one element changes, the second one changes in parallel.

I offered my decision for now, but I hope that there are better solutions.

  • I wonder why such a "crutch" come up with? How is the first element related to the second? - Invision
  • @Invision The data in one corresponds to the data in another line by line, so it is convenient when changing the height of one input field to change the height of another. Added sample data in the answer (this is not so much related to the question) - Timofei Bondarev

2 answers 2

Found another way. The condition is as follows: disable manual resizing.

You can make it so that when you add a new line to one of the textarea , the width of both elements automatically changes.

 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>

Minuses:

  • It is necessary either to fix the maximum height, or to obtain a potentially infinitely growing field.
  • The user cannot manually select the desired field size.

Pros:

  • The size of the fields changes automatically in accordance with the maximum filling .
  • Smooth resizing.

    Now there is such a solution:

     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>

    Minuses:

    • With a rapid increase in the height of an element, the mousemove event does not always fire, which is why the change of the second element occurs abruptly.
    • If you first increase the height of one field, it is not always possible to reduce the height of another (reproduced, at least in the local sandbox).
    • It works only in Firefox, Safari and Chrome (it should not be in IE, but there is no place to check).

    Pros:

    • You can set the desired comfortable height of the field.