textarea auto height js

105

23 февраля 2021, 10:30

Подскажите пожалуйста, как добиться изменения height textarea на auto в зависимости от контента. При нажатии на open должен быть виден весь текст, который находиться в textarea. Спасибо.

function description_task() { 
	var open = document.getElementById('description_task').getAttribute('data-open'); 
	if (open == 1) { 
		document.getElementById('description_task').style.height = 'auto'; 
		document.getElementById('description_task').setAttribute('data-open', 2); 
	} else { 
		document.getElementById('description_task').style.height = '22px'; 
		document.getElementById('description_task').setAttribute('data-open', 1); 
	} 
}

textarea { 
  width: 95%; 
  height: 22px; 
  display: inline-block; 
  overflow: hidden; 
  text-align: justify; 
  border: none; 
  outline: none; 
  resize: none; 
} 
 
span { 
  display: block; 
  float: right; 
  color: #007bff; 
  cursor: pointer; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<textarea data-open="1" id="description_task" placeholder="Описание задачи">Петербург, лето 1805 г. На вечере у фрейлины Шерер присутствуют среди прочих гостей Пьер Безухов, незаконный сын богатого вельможи, и князь Андрей Болконский. Разговор заходит о Наполеоне, и оба друга пытаются защитить великого человека от осуждений хозяйки вечера и её гостей. Князь Андрей собирается на войну, потому что мечтает о славе, равной славе Наполеона, а Пьер не знает, чем ему заняться, участвует в кутежах петербургской молодёжи (здесь особое место занимает Федор Долохов, бедный, но чрезвычайно волевой и решительный офицер); за очередное озорство Пьер выслан из столицы, а Долохов разжалован в солдаты. 
</textarea> 
<span id="description_icon_task" onclick="description_task()" data-toggle="tooltip" data-placement="left" title="Развернуть описание">Open</span>

Answer 1

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

В вашем случае это будет как-то так:

function description_task() { 
  var open = document.getElementById('description_task').getAttribute('data-open'); 
  if (open == 1) { 
 
  var min_line_height = '22px'; 
  var obj = document.getElementById('description_task'); 
  var div = document.getElementById('description_task_div'); 
  div.innerHTML = obj.value; 
  var obj_height = div.offsetHeight; 
  if (event.keyCode == 13) 
    obj_height += line_height; 
  else if (obj_height < min_line_height) 
    obj_height = min_line_height; 
  obj.style.height = obj_height + 'px'; 
 
 
    document.getElementById('description_task').setAttribute('data-open', 2); 
  } else { 
    document.getElementById('description_task').style.height = '22px'; 
    document.getElementById('description_task').setAttribute('data-open', 1); 
  } 
}

  textarea { 
  width: 95%; 
  height: 22px; 
  display: inline-block; 
  overflow: hidden; 
  text-align: justify; 
  border: none; 
  outline: none; 
  resize: none; 
  font-family: Arial; 
  font-size: 12px; 
} 
  #description_task_div{ 
  width: 95%; 
  font-family: Arial; 
  font-size: 12px; 
  white-space: pre-wrap; 
  word-wrap: break-word; 
  visibility:hidden; 
  position: absolute; 
  left: -9999px; 
  } 
 
span { 
  display: block; 
  float: right; 
  color: #007bff; 
  cursor: pointer; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<textarea data-open="1" id="description_task" placeholder="Описание задачи">Петербург, лето 1805 г. На вечере у фрейлины Шерер присутствуют среди прочих гостей Пьер Безухов, незаконный сын богатого вельможи, и князь Андрей Болконский. Разговор заходит о Наполеоне, и оба друга пытаются защитить великого человека от осуждений хозяйки вечера и её гостей. Князь Андрей собирается на войну, потому что мечтает о славе, равной славе Наполеона, а Пьер не знает, чем ему заняться, участвует в кутежах петербургской молодёжи (здесь особое место занимает Федор Долохов, бедный, но чрезвычайно волевой и решительный офицер); за очередное озорство Пьер выслан из столицы, а Долохов разжалован в солдаты. 
</textarea> 
<span id="description_icon_task" onclick="description_task()" data-toggle="tooltip" data-placement="left" title="Развернуть описание">Open 
</span> 
 
<div id=description_task_div></div>