В любом случае, через CSS или Javascript задается высота текстового поля на основе содержимого? У меня есть hardcoded height в моем CSS, но я хотел, чтобы оно по умолчанию, поэтому нет вертикальной полосы прокрутки при загрузке страницы?
Есть ли в любом случае, чтобы иметь значение "autofit" textarea на основе содержимого при загрузке страницы?
Ответ 1
Как насчет http://www.jacklmoore.com/autosize/ Бросьте автозапуск на любую веб-страницу, и он должен просто работать. Источник короткий и хорошо комментируется, если вам интересно, как это работает.
// Example:
$(document).ready(function(){
$('textarea').autosize();
});
Источник: https://github.com/jackmoore/autosize
Ответ 2
Вы можете использовать плагин с автоматическим изменением размера, используя jQuery UI Autoresize
Вот html,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>
и вот jQuery,
$('textarea').autoResize();
см. DEMO
Ответ 3
Без плагинов вы можете сделать что-то вроде
$(document).ready(function(){
elem=document.getElementById('#elemid');
while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});
Изменение размера текстового поля, пока оно имеет полосу прокрутки (поэтому elem.clientHeight < elem.scrollHeight). Вы можете сделать это довольно легко даже без JQuery, на простом javascript.
Не тестировал код, это просто "концепция".
EDIT: Dumb me, это намного проще, без петель...
if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";
Ответ 4
Протестировано в хроме
Чистое решение для javascript (Нет плагина, нет jquery)
в действии: fiddle
Я создал 3 функции:
- получить высоту строки
- получить количество строк
- установить высоту текстового поля при вводе (событие ввода)
//attach input event
document.getElementById('ta').addEventListener('input', autoHeight, false);
function autoHeight(e){
var lh = getLineHeightInPixels(e.target);
var nol = getNumberOfLines(e.target);
var ht = lh * nol;
e.target.style.height = ht + 'px';
}
function getNumberOfLines(el){
var text = el.value
var lines = text.split(/\r|\r\n|\n/);
return lines.length;
}
function getLineHeightInPixels(el){
var tempDiv = document.createElement('div');
tempDiv.style.visibility = 'hidden';
tempDiv.style.fontFamily = getComputedStyle(el).getPropertyValue('font-family');
tempDiv.style.fontSize = getComputedStyle(el).getPropertyValue('font-size');
tempDiv.style.lineHeight = getComputedStyle(el).getPropertyValue('line-height');
tempDiv.style.fontVariant = getComputedStyle(el).getPropertyValue('font-variant');
tempDiv.style.fontStyle = getComputedStyle(el).getPropertyValue('font-style');
tempDiv.innerText = 'abcdefghijklmnopqrstuwxyz';
document.documentElement.appendChild(tempDiv);
var ht = parseInt(getComputedStyle(tempDiv).getPropertyValue('height'))
document.documentElement.removeChild(tempDiv);
return (ht);
}
//set height on document load
document.addEventListener('DOMContentLoaded', function(){document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';}, false);<textarea id="ta"></textarea>Ответ 5
HTML
<div id="container">
<textarea >
1
12
123
1234
12345
123456
1234567
</textarea>
</div>
CSS
div#container textarea {
overflow-y: hidden; /* prevents scroll bar flash */
padding-top: 1.1em; /* prevents text jump on Enter keypress */
}
JQuery
// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (e){
$(this).css('height', 'auto' );
$(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();
Ответ 6
Эй может пойти с плагином ExpandingTextArea, в котором невидимый элемент pre clone поддерживается за вашим текстовым полем. Всякий раз, когда высота этого pre изменяется, обновляется текстовое поле.
Просто добавьте "expand.js" и "jQuery" на странице и добавьте класс "expand" в текстовое поле к которой нужно расширять.
<script src='expanding.js'></script>
<textarea class='expanding'></textarea>
Следуйте ссылку для более подробной информации и демонстрации
Примечание: Он будет работать с загрузкой документа для уже добавленных текстов
Ответ 7
Если вы не возражаете против scollbar внутри текстовой области, вы можете использовать
$(document).ready(function(){
tx = $('#textarea')
tx.height(tx.prop('scrollHeight'));
})
и здесь Fiddle
другое Fiddle, это имеет минимальную и максимальную ширину.
но с плагинами вроде авто-размер
высота текстового поля увеличивается с помощью ввода.
или вы можете попробовать этот плагин
Ответ 8
Единственным css, который я использую ниже на textarea, является его width, нет необходимости устанавливать начальный height. overflow не требуется, так как используется scrollHeight:
измерение высоты содержимого элемента, включая контент не видны на экране из-за переполнения.
scrollHeight: MDN
Если вы хотите работать с Internet Explorer, тогда необходимо использовать overflow: auto, так как в противном случае IE настаивает на добавлении вертикальной полосы прокрутки (даже если прокручивать нечего).
Обратите внимание, что необязательно указать width, но это свойство чаще всего задается по отношению к этой теме.
Это необходимый JavaScript:
document.addEventListener("DOMContentLoaded", function(event) {
var ta = document.getElementById('ta');
ta.style.height = ta.scrollHeight + 'px';
});
Когда DOM загрузил height в текстовое поле, установлено значение scrollHeight.
Вот полная страница для тестирования:
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<style>
textarea {
width: 300px;
overflow: auto;
}
</style>
</head>
<body>
<textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var ta = document.getElementById('ta');
ta.style.height = ta.scrollHeight + 'px';
});
</script>
</body>
</html>
При необходимости код может быть применен ко всем текстовым полям на странице:
document.addEventListener("DOMContentLoaded", function(event) {
var tas = document.getElementsByTagName('textarea');
for (var i=0; i < tas.length; i++) {
tas[i].style.height = tas[i].scrollHeight + 'px';
}
});
Ответ 9
Вот чистое решение для JavaScript. Нет jquery, нет плагинов и т.д. DEMO
Итак, как это работает? Предположим, у вас есть размер шрифта по умолчанию/строка-высота/и т.д. Ну, ваше текстовое пространство занимает около 11 символов на 100 пикселей ширины. Если мы сможем это помнить, мы можем использовать эту функцию.
function textareaSetSize(elem, width)
{
var length = elem.value.length;
//about 11 characters per 100 pixels
var estimatedLines = Math.round(length/(width/100*11));
//alert('Estimated number of lines: ' + length);
elem.style.width = width + 'px';
elem.rows = estimatedLines;
}
Тогда..
var selector = document.getElementsByClassName('textarea');
for(var i = 0; i < selector.length; i++)
{
selector[i].onkeyup = function(){
textareaSetSize(this, 400);
};
}
html...
<button id="reset">Empty</button>
<textarea class="textarea" id="autosize"></textarea>
<textarea class="textarea" id="autosize2"></textarea>
<textarea class="textarea" id="autosize3"></textarea>
<textarea class="textarea" id="autosize4"></textarea>
запустить его...
textareaSetSize(ta, 500);
textareaSetSize(ta2, 400);
textareaSetSize(ta3, 400);
textareaSetSize(ta4, 400);
Это не идеальное решение, поэтому, если вы видите нововведение, дайте мне знать.
Ответ 10
Я не знаю почему, но, похоже, моя поисковая система принесла мне другое решение (учебное пособие "How-To" ):
http://www.sitepoint.com/build-auto-expanding-textarea-3/
EDIT:
вот код.
/**
* TextAreaExpander plugin for jQuery
* v1.0
* Expands or contracts a textarea height depending on the
* quatity of content entered by the user in the box.
*
* By Craig Buckler, Optimalworks.net
*
* As featured on SitePoint.com:
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
* Please use as you wish at your own risk.
*/
/**
* Usage:
*
* From JavaScript, use:
* $(<node>).TextAreaExpander(<minHeight>, <maxHeight>);
* where:
* <node> is the DOM node selector, e.g. "textarea"
* <minHeight> is the minimum textarea height in pixels (optional)
* <maxHeight> is the maximum textarea height in pixels (optional)
*
* Alternatively, in you HTML:
* Assign a class of "expand" to any <textarea> tag.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea>
*
* Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea>
* The textarea will use an appropriate height between 50 and 200 pixels.
*/
(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length, ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));
e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
e.style.height = h + "px";
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != "textarea") return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).css("padding-top", 0).css("padding-bottom", 0);
$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
}
});
return this;
};
})(jQuery);
// initialize all expanding textareas
jQuery(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander();
});
Я оставил комментарии в коде, так как это не моя работа;)
Ответ 11
Я не мог использовать scrollHeight как он возвращает 0 при загрузке страницы (возможно, потому что моя текстовая область скрыта при загрузке). Вероятно, это не гнездовая практика (я новичок в js), но единственный вариант, который работал, заключался в подсчете количества строк в textarea и определении длины более длинной строки в нем. Затем установите width и height соответственно.
var elements = document.getElementsByTagName("textarea")
for (var i = 0; i < elements.length; i++) {
var atagelement = elements[i];
console.log(atagelement.value);
var textareasplit =atagelement.value.split(/\r|\r\n|\n/);
var textareaheight = textareasplit.length *17 // change 17 according to your needs
var maxline=0
for (var j = 0; j < textareasplit.length; j++){
var line = textareasplit[j];
var linelenght= line.length;
if (maxline < linelenght){
maxline= linelenght;
};
};
var textareawidth= maxline*10 // change 10 according to your needs
atagelement.setAttribute('style', "width:" + textareawidth+"px ; height:"+textareaheight+"px");
}
При необходимости вы также можете установить max-width (или max-height) следующим образом
var maxwidth= window.innerWidth *0.8
console.log(maxwidth)
atagelement.setAttribute('style', "width:" + textareawidth+"px ; height:"+textareaheight+"px ; max-width:" + maxwidth+ "px");
Ответ 12
Этот другой вопрос о вводе, подобном WhatsApp, был неправильно помечен как дубликат этого текущего вопроса. Поскольку я не могу ответить там, я отвечаю на это здесь.
Я пытался создать область ввода, похожую на WhatsApp, со следующими функциями:
- Div/textarea должен расширяться вверх, когда содержимое превышает 4em
- Максимальная высота div/textarea должна быть 6em
- Область сообщений (выше div/textarea) должна уменьшиться, т.е. Должен измениться размер ее кнопки прокрутки.
Вот мое чистое решение CSS, если кто-то ищет его (как я это делал несколько минут назад).
.arena {
position: absolute;
height: 20em;
width: 12em;
background-color: #efefef;
padding: 1em;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.messages {
padding: 0.2em;
height: 5em;
flex: 1 1 0;
overflow: auto;
}
.content {
background-color: teal;
height: 20em;
}
.footer {
position: relative;
background-color: #cdcdcd;
padding: 0.2em;
}
.editable {
outline: none;
max-height: 6em;
min-height: 4em;
overflow: auto;
width: 80%;
background-color: #fff;
}<div class="arena">
<div class="messages">
<div class="content"></div>
</div>
<div class="footer">
<div class="editable" contenteditable="true"></div>
</div>
</div>