Как сделать автоматическую смену высоты textarea без использования библиотек.
1 ответ
Первая ссылка в 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>
-
Попробуйте вводить много текст (больше высоты ввода), смешно однако получается))– user26912722 окт 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Мальгинов ссылка на стороннем сайте может перестать работать со временем, поэтому ответ должен содержать решение, а не ссылку на другой сайт.– Alex22 окт 2017 в 15:10