Как я могу сделать <textarea>
автоматическое изменение размера с его содержимым (как в Facebook) с помощью jQuery.
автоматическое изменение размера текстовой области в jquery
Ответы (4)
Используйте интерфейс jQuery.
Посмотрите эту демонстрацию: http://jqueryui.com/demos/resizable/#textarea
Используйте плагин jquery autoResize Джеймса Падолси из http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Основное использование
$('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
Супер легкий вес:
Кто-нибудь считал контент редактируемым? Не возитесь с прокруткой, и единственный JS, который мне нравится, это если вы планируете сохранять данные при размытии... и, по-видимому, он совместим со всеми популярными браузерами: http://caniuse.com/#feat=contenteditable
Просто настройте его так, чтобы он выглядел как текстовое поле, и он автоматически масштабируется... Сделайте его минимальную высоту предпочтительной высотой текста и сделайте это.
Что хорошо в этом подходе, так это то, что вы можете сохранять и добавлять теги в некоторых браузерах.
http://jsfiddle.net/gbutiri/v31o8xfo/
<style>
.autoheight {
min-height: 16px;
font-size: 16px;
margin: 0;
padding: 10px;
font-family: Arial;
line-height: 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
resize: none;
border: 1px solid #ccc;
outline: none;
width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
var $this = $(this);
// The text is here. Do whatever you want with it.
console.log($this.html());
});
</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>