Как я могу автоматически раскрыть текстовую область с помощью jQuery?
Автоматическое расширение текстового поля с помощью jQuery
Ответ 1
Я пробовал много и
этот отличный. Ссылка мертва. Более новая версия доступна здесь. См. Ниже для старой версии.
Вы можете попробовать, нажав и удерживая клавишу ввода в textarea. Сравните эффект с другим автоматически расширяющимся плагином textarea....
изменить на основе комментария
$(function() {
$('#txtMeetingAgenda').autogrow();
});
Примечание: вы должны включить необходимые файлы js...
Чтобы предотвратить включение и выключение полосы прокрутки в текстовом поле во время расширения/сжатия, вы можете установить overflow на hidden:
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
Update:
Вышеуказанная ссылка не работает. Но вы все равно можете получить файлы javascript здесь.
Ответ 2
Если вам не нужен плагин, есть очень простое решение
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
Посмотрите, как он работает в jsFiddle Я использовал для ответа на другой вопрос в текстовой области здесь.
Чтобы ответить на вопрос о том, чтобы сделать это в обратном порядке или уменьшить его, поскольку текст удален: jsFiddle
И если вам нужен плагин
Ответ 3
Растет/Сжимает текстовое поле. В этой демонстрации используется jQuery для привязки событий, но это не обязательно.
(без поддержки IE - IE не отвечает на изменение атрибута строк)
DEMO PAGE
HTML
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
CSS
textarea{
display:block;
box-sizing: padding-box;
overflow:hidden;
padding:10px;
width:250px;
font-size:14px;
margin:50px auto;
border-radius:8px;
border:6px solid #556677;
}
javascript (обновлено)
$(document)
.one('focus.textarea', '.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
Ответ 4
Ответ 5
Благодаря SpYk3HH, я начал с его решения и превратил его в это решение, которое добавляет сокращающиеся функциональные возможности и даже проще и быстрее, я полагаю.
$("textarea").keyup(function(e) {
$(this).height(30);
$(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});
Протестировано в браузере Chrome, Firefox и Android 2.3.3.
В некоторых браузерах вы можете видеть вспышки полос прокрутки. Добавьте этот CSS, чтобы решить эту проблему.
textarea{ overflow:hidden; }
Ответ 6
Чтобы определить автоматическую расширяемую текстовую область, вам нужно сделать две вещи:
- Разверните его, как только вы нажмете клавишу Enter внутри него, или введите содержимое более чем одной строки.
- И уменьшить при размытии, чтобы получить фактический размер, если пользователь ввел белые пробелы. (бонус)
Для выполнения задачи используется функция ручной работы.
Работает отлично со всеми браузерами (< IE7). Вот способ:
//Here is an event to get TextArea expand when you press Enter Key in it.
// intiate a keypress event
$('textarea').keypress(function (e) {
if(e.which == 13) {
var control = e.target;
var controlHeight = $(control).height();
//add some height to existing height of control, I chose 17 as my line-height was 17 for the control
$(control).height(controlHeight+17);
}
});
$('textarea').blur(function (e) {
var textLines = $(this).val().trim().split(/\r*\n/).length;
$(this).val($(this).val().trim()).height(textLines*17);
});
ЗДЕСЬ - это сообщение об этом.
Ответ 7
Вы можете попробовать этот
$('#content').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').change();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<textarea>How about it</textarea><br />
<textarea>111111
222222
333333
444444
555555
666666</textarea>
</div>Ответ 8
Я использовал плагин Textarea Expander jQuery раньше с хорошими результатами.
Ответ 9
Каждый должен попробовать этот плагин jQuery: xautoresize-jquery. Это действительно хорошо и должно решить вашу проблему.
Ответ 10
Я только что построил эту функцию для расширения текстовых полей на pageload. Просто измените each на keyup, и это произойдет, когда текстовое поле будет введено.
// On page-load, auto-expand textareas to be tall enough to contain initial content
$('textarea').each(function(){
var pad = parseInt($(this).css('padding-top'));
if ($.browser.mozilla)
$(this).height(1);
var contentHeight = this.scrollHeight;
if (!$.browser.mozilla)
contentHeight -= pad * 2;
if (contentHeight > $(this).height())
$(this).height(contentHeight);
});
Протестировано в Chrome, IE9 и Firefox. К сожалению, Firefox имеет эту ошибку, которая возвращает неверное значение для scrollHeight, поэтому приведенный выше код содержит (хакерское) обходное решение для него.
Ответ 11
Я исправил несколько ошибок в ответе, предоставленном Рейгелем (принятый ответ):
- Порядок, в котором теперь заменяются узлы html, не вызывает неожиданного кода в теневом элементе. (Оригинал заменил " > " на "& ampgt;", вызывая неправильный расчет высоты в некоторых редких случаях).
- Если текст заканчивается новой строкой, тень теперь получает дополнительный символ "#", вместо того, чтобы иметь фиксированную добавленную высоту, как в случае с оригиналом.
- Изменение размера текстового поля после инициализации обновляет ширину тени.
- добавлено слово-wrap: слово-слово для тени, поэтому оно ломается так же, как текстовое поле (форсирование разрывов для очень длинных слов)
Есть некоторые проблемы, связанные с пробелами. Я не вижу решения для двойных пространств, они отображаются как одиночные пробелы в тени (html-рендеринг). Этого нельзя избежать, используя & nbsp;, потому что пробелы должны сломаться. Кроме того, textarea разбивает строку после пробела, если нет места для этого пространства, она сломает линию в более ранней точке. Предложения приветствуются.
Исправленный код:
(function ($) {
$.fn.autogrow = function (options) {
var $this, minHeight, lineHeight, shadow, update;
this.filter('textarea').each(function () {
$this = $(this);
minHeight = $this.height();
lineHeight = $this.css('lineHeight');
$this.css('overflow','hidden');
shadow = $('<div></div>').css({
position: 'absolute',
'word-wrap': 'break-word',
top: -10000,
left: -10000,
width: $this.width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize: 'none'
}).appendTo(document.body);
update = function () {
shadow.css('width', $(this).width());
var val = this.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n/g, '<br/>')
.replace(/\s/g,' ');
if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
shadow.html(val);
$(this).css('height', Math.max(shadow.height(), minHeight));
};
$this.change(update).keyup(update).keydown(update);
update.apply(this);
});
return this;
};
}(jQuery));
Ответ 12
Код SpYk3HH с добавлением для уменьшения размера.
function get_height(elt) {
return elt.scrollHeight + parseFloat($(elt).css("borderTopWidth")) + parseFloat($(elt).css("borderBottomWidth"));
}
$("textarea").keyup(function(e) {
var found = 0;
while (!found) {
$(this).height($(this).height() - 10);
while($(this).outerHeight() < get_height(this)) {
$(this).height($(this).height() + 1);
found = 1;
};
}
});
Ответ 13
function autosize(textarea) {
$(textarea).height(1); // temporarily shrink textarea so that scrollHeight returns content height when content does not fill textarea
$(textarea).height($(textarea).prop("scrollHeight"));
}
$(document).ready(function () {
$(document).on("input", "textarea", function() {
autosize(this);
});
$("textarea").each(function () {
autosize(this);
});
});
(Это не будет работать в Internet Explorer 9 или старше, поскольку оно использует событие input)
Ответ 14
У людей, похоже, очень много обработанных решений...
Вот как я это делаю:
$('textarea').keyup(function()
{
var
$this = $(this),
height = parseInt($this.css('line-height'), 10),
padTop = parseInt($this.css('padding-top'), 10),
padBot = parseInt($this.css('padding-bottom'), 10);
$this.height(0);
var
scroll = $this.prop('scrollHeight'),
lines = (scroll - padTop - padBot) / height;
$this.height(height * lines);
});
Это будет работать с длинными строками, а также разрывами строк.. растет и сжимается.
Ответ 15
Это помогло мне лучше:
$('.resiText').on('keyup input', function() {
$(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
});.resiText {
box-sizing: border-box;
resize: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="resiText"></textarea>Ответ 16
Для тех, кто использует плагин, опубликованный Рейгелем, имейте в виду, что это отключит функциональность отмены в Internet Explorer (идите, чтобы демонстрация прошла).
Если это проблема для вас, я бы предложил использовать плагин отправленный @richsage, так как он не страдает от этой проблемы. Для получения дополнительной информации см. Вторую маркерную точку в "Поиск окончательного изменения размера текста" .
Ответ 17
Я написал эту функцию jquery, которая работает.
Однако вам нужно указать min-height в css, и если вы не хотите делать некоторую кодировку, она должна быть длиной две цифры. т.е. 12px;
$.fn.expand_ta = function() {
var val = $(this).val();
val = val.replace(/</g, "<");
val = val.replace(/>/g, ">");
val += "___";
var ta_class = $(this).attr("class");
var ta_width = $(this).width();
var min_height = $(this).css("min-height").substr(0, 2);
min_height = parseInt(min_height);
$("#pixel_height").remove();
$("body").append('<pre class="'+ta_class+'" id="pixel_height" style="position: absolute; white-space: pre-wrap; visibility: hidden; word-wrap: break-word; width: '+ta_width+'px; height: auto;"></pre>');
$("#pixel_height").html(val);
var height = $("#pixel_height").height();
if (val.substr(-6) == "<br />"){
height = height + min_height;
};
if (height >= min_height) $(this).css("height", height+"px");
else $(this).css("height", min_height+"px");
}
Ответ 18
Существует также очень классный bgrins/ExpandingTextareas (github) проект, основанный на публикации Neill Jenkins называется Расширение текстовых областей, сделанных изящных
Ответ 19
Мне нужны анимации и автоматическая усадка. Комбинация, по-видимому, сложная, потому что люди придумали довольно интенсивные решения для нее. Я тоже сделал это с несколькими текстами. И это не так смешно тяжело, как плагин jQuery.
Я основывался на ответе vsync (и улучшении, которое он сделал для него), http://codepen.io/anon/pen/vlIwj - это кодекс для моего улучшения.
HTML
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
CSS
body{ background:#728EB2; }
textarea{
display:block;
box-sizing: padding-box;
overflow:hidden;
padding:10px;
width:250px;
font-size:14px;
margin:50px auto;
border-radius:8px;
border:6px solid #556677;
transition:all 1s;
-webkit-transition:all 1s;
}
JS
var rowheight = 0;
$(document).on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows = this.value.split("\n").length;
$this = $(this);
var rowz = rows < minRows ? minRows : rows;
var rowheight = $this.attr('data-rowheight');
if(!rowheight){
this.rows = rowz;
$this.attr('data-rowheight', (this.clientHeight - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom')))/ rowz);
}else{
rowz++;
this.style.cssText = 'height:' + rowz * rowheight + 'px';
}
});
Ответ 20
Есть много ответов для этого, но я нашел что-то очень простое, приложил событие keyup к текстовой области и проверил, чтобы ввести ключ, нажмите key code, это 13
keyPressHandler(e){
if(e.keyCode == 13){
e.target.rows = e.target.rows + 1;
}
}
Это добавит еще одну строку в textarea, и вы можете стилизовать ширину с помощью CSS.
Ответ 21
Скажем, вы пытаетесь выполнить это с помощью Knockout... вот как:
На странице:
<textarea data-bind="event: { keyup: $root.GrowTextArea }"></textarea>
В модели просмотра:
self.GrowTextArea = function (data, event) {
$('#' + event.target.id).height(0).height(event.target.scrollHeight);
}
Это должно работать, даже если у вас есть несколько текстовых полей, созданных новичком, как я.
Ответ 22
Простое решение:
HTML:
<textarea class='expand'></textarea>
JS:
$('textarea.expand').on('input', function() {
$(this).scrollTop($(this).height());
});
$('textarea.expand').scroll(function() {
var h = $(this).scrollTop();
if (h > 0)
$(this).height($(this).height() + h);
});
Ответ 23
@Георгий Иванкин сделал предложение в комментарии, Я использовал его успешно:) -, но с небольшими изменениями:
$('#note').on('keyup',function(e){
var maxHeight = 200;
var f = document.getElementById('note');
if (f.clientHeight < f.scrollHeight && f.scrollHeight < maxHeight )
{ f.style.height = f.scrollHeight + 'px'; }
});
Он перестает расширяться после достижения максимальной высоты 200 пикселей
Ответ 24
Простейшее решение:
HTML:
<textarea class="auto-expand"></textarea>
CSS
.auto-expand {
overflow:hidden;
min-height: 80px;
}
js (jquery):
$(document).ready(function () {
$("textarea.auto-expand").focus(function () {
var $minHeight = $(this).css('min-height');
$(this).on('input', function (e) {
$(this).css('height', $minHeight);
var $newHeight = $(this)[0].scrollHeight;
$(this).css('height', $newHeight);
});
});
});
Ответ 25
Старый вопрос, но вы можете сделать что-то вроде этого:
HTML:
<textarea class="text-area" rows="1"></textarea>
JQuery
var baseH; // base scroll height
$('body')
.one('focus.textarea', '.text-area', function(e) {
baseH = this.scrollHeight;
})
.on('input.textarea', '.text-area', function(e) {
if(baseH < this.scrollHeight) {
$(this).height(0).height(this.scrollHeight);
}
else {
$(this).height(0).height(baseH);
}
});
Таким образом, автоматическое изменение размера применимо к любому текстовому пространству с классом "текстовая область". Также сокращается при удалении текста.
jsfiddle: