0

Как сделать автоматическую смену высоты textarea без использования библиотек.

1

1 ответ 1

0

Первая ссылка в google по запросу "textarea auto height" - https://codepen.io/vsync/pen/czgrf

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

textarea.addEventListener('keydown', autosize);

function autosize() {
  var el = this;
  setTimeout(function() {
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  }, 0);
}
body {
  background: #728EB2;
  color: #FFF;
}


/*( 'box-sizing' will not work with this code )*/

textarea {
  /* box-sizing: padding-box; */
  overflow: hidden;
  /* demo only: */
  padding: 10px;
  width: 250px;
  font-size: 14px;
  margin: 50px auto;
  display: block;
  border-radius: 10px;
  border: 6px solid #556677;
}
<p>This solution is OBSOLETE, checkout my better solution - <a href='https://codepen.io/vsync/pen/frudD' target='_blank'>https://codepen.io/vsync/pen/frudD</a>

  <textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>

5
  • Попробуйте вводить много текст (больше высоты ввода), смешно однако получается))
    – user269127
    22 окт 2017 в 14:52
  • Хотя бы копипаст нормальный делал бы)) This solution is OBSOLETE, checkout my better solution - <a href='https://codepen.io/vsync/pen/frudD' 22 окт 2017 в 14:53
  • @АлексейШиманский я специально скопировал полностью. Если автор оригинального решения предлагает лучший вариант - почему нет? Плюс этим ответом я больше хотел показать, что гуглом полоьзоваться не так сложно, нежели чем дать человеку "рыбку" 22 окт 2017 в 15:01
  • @ИванmalginovdesignМальгинов как думаешь, этот сайт существует, чтоб его посылали в гугл или гугл существует, чтоб узнавать решение тут? 22 окт 2017 в 15:07
  • @ИванmalginovdesignМальгинов ссылка на стороннем сайте может перестать работать со временем, поэтому ответ должен содержать решение, а не ссылку на другой сайт.
    – Alex
    22 окт 2017 в 15:10

Ваш ответ

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

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