Как расширить новую строку для textarea, когда я нажимаю enter?

Question

Предположим, у меня есть текстовое поле с размером обычного текстового поля, как сделать его растяжимым, когда я нажимаю enter или crtl + enter, чтобы создать новую строку для ввода пользователем.

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

<td> 
    <textarea rows="5" cols="50" name="description[]"> 
     <?php echo $row[ 'description']; ?> 
    </textarea> 
</td> 

Выше текстовое поле, которое я упомянул.

Answer 1

Вам нужно будет использовать javascript. В частности, вы можете использовать javascript фреймворк под названием jQuery. Проверьте этот ответ: Auto expand a textarea using jQuery

Answer 2

Вы можете попробовать некоторые JQuery:

$("textarea").keyup(function(e) { 
    if(e.keyCode == 13) //13 is the ASCII code for ENTER 
     { 
      var rowCount = $(this).attr("rows"); 
      $(this).attr({rows: rowCount + 5}); 
     } 
}); 

Answer 3

В качестве альтернативы - можно использовать DIV с contenteditable истинна.

<td> 
    <div id="description[]" contenteditable="true"> 
    <?php echo $row['description']; ?> 
    </div> 
</td> 
<input name="description[]" type="hidden" value=""> 

Затем добавить функцию JS для отправки формы (при условии, что это для формы), которая устанавливает значение скрытого ввода во внутренний текст/содержание DIV

function updateText() { 
    content = document.getElementById('description[]').textContent || document.getElementById('description[]').innerText; 
    document.querySelector('[name="description[]"]').value = content; 
} 

Answer 4

ЗАКАНЧИВАТЬ этот автоматический рост jQuery plugin - https://github.com/akaihola/jquery-autogrow