1

У меня есть textarea высотой в одну строку. Необходимо, чтобы когда пользователь нажимал на ентер (т.е. переход на новую строку) textarea увеличивался в высоту на одну строку.

1
  • А если пользователь всё в одну строку пишет, то как должна вести себя textarea?
    – UModeL
    23 янв 2021 в 12:55

2 ответа 2

3

Улучшенный JS-вариант Алексея, в котором не нужен таймер, нет скачков и срабатывает на любое изменение поля, не только клавиатурой.

const textarea = document.querySelector('textarea');

textarea.addEventListener( 'input', autosize );
             
function autosize(){
  this.style.height = 'auto';
  let applyNow = this.style.offsetHeight;
  this.style.height = this.scrollHeight - 20 + 'px';
}
textarea {  
  overflow:hidden;
  padding: 10px;
  border: 1px solid #556677;
}
<textarea rows='1'></textarea>

2

На JS

var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);
             
function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}
textarea{  
  overflow:hidden;
  padding:10px;
  border:1px solid #556677;
}
<textarea rows='1'></textarea>


На CSS (ну, почти)

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  border: solid 1px;
  padding: 0.25em 0.5em;

}
.input-sizer.stacked {
  padding: 0.5em;
  align-items: stretch;
}
.input-sizer.stacked::after,
.input-sizer.stacked input,
.input-sizer.stacked textarea {
  grid-area: 2/1;
}
.input-sizer::after,
.input-sizer input,
.input-sizer textarea {
  width: auto;
  min-width: 1em;
  grid-area: 1/2;
  font: inherit;
  padding: 0.25em;
  margin: 0;
  resize: none;
  background: none;
  appearance: none;
  border: none;
}
.input-sizer textarea {
    min-height: 50px;
}

.input-sizer::after {
  content: attr(data-value) " ";
  visibility: hidden;
  white-space: pre-wrap;
}
<label class="input-sizer stacked">  
  <textarea oninput="this.parentNode.dataset.value = this.value" rows="1" placeholder="hi"></textarea>
</label>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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