Я заполняю текстовое поле контентом, который пользователь может редактировать.
Можно ли растянуть его, чтобы он соответствовал содержимому с помощью CSS (например, overflow:show
для div)?
Я заполняю текстовое поле контентом, который пользователь может редактировать.
Можно ли растянуть его, чтобы он соответствовал содержимому с помощью CSS (например, overflow:show
для div)?
Ответы:
На самом деле, нет. Обычно это делается с помощью javascript.
здесь есть хорошее обсуждение способов сделать это ...
Автоматическое изменение размера текстового поля с помощью прототипа
только одна строка
<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
this.scrollHeight + "px"
на this.scrollHeight + 3 + "px"
делает текстовое поле достаточно большим, чтобы на нем не отображалась полоса прокрутки.
Вот функция, которая работает с jQuery (только для высоты, а не ширины):
function setHeight(jq_in){
jq_in.each(function(index, elem){
// This line will work with pure Javascript (taken from NicB's answer):
elem.style.height = elem.scrollHeight+'px';
});
}
setHeight($('<put selector here>'));
Примечание. Оператор запросил решение, которое не использует Javascript, однако это должно быть полезно для многих людей, которые сталкиваются с этим вопросом.
Это очень простое решение, но оно работает для меня:
<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>
<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>
<style> textarea { resize: none; overflow: auto; } </style> <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea> <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){ this.style.height = '1px'; this.style.height = this.scrollHeight + 'px'; } </script>
основном вам нужно сначала установить высоту на 1 пиксель, из-за этого: stackoverflow.com/questions/10722058/…
Еще одно простое решение для управления динамическим текстовым полем.
<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
this.style.height = "";
this.style.height = this.scrollHeight + "px";
});
</script>