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 that you have read and understand our privacy policy and code of conduct.

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