Растягиваемый по высоте autosize textarea, автоматическая высота textarea, скрипты, примеры
textarea autosize . Нам нужна автоматическая высота textarea , т.е. чтобы textarea растягивался автоматически при заполнении. Как сделать растягиваемое поле textarea под содержание! Скрипты autosize textarea, все способы растянуть textarea по высоте! Сколько способов и вариантов скриптов, которые могут растягивать textarea по высоте!?
Всё известные способы растягивать textarea при заполнении текста
- Автоматически растягиваемая высота textarea ->
javascript + пример + скачать скрипт - Автоматическая высота textarea по высоте по его id ->
javascript + пример + скачать скрипт - Автоматическая высота textarea с использованием ->
jQuery + пример + скачать скрипт - Autosize по высоте textarea при помощи библиотеки ->
autosize.js + пример + скачать скрипт - Это не textarea, но это существует ->
contenteditable="true"
Автоматически растягиваемая высота textarea javascript
Для иллюстрации работы данного скрипта, на чистом javascript, нам потребуется...
var tx = document.getElementsByTagName('textarea');//РАСТЯГИВАЕМ_textarea
for (var i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';//////console.log(this.scrollHeight);
}
Пример textarea который растягивается автоматически по содержанию на чистом javascript
Пример для данного скрипта, на отдельной страницеСкачать скрипт автоматического растягивания textarea по содержанию на чистом javascript
У нас есть отдельная страница, на которой мы складываем скрипты, которые могут быть выделены в отдельный архив...
Скачать скрипт автоматического растягивания textarea, что скрипт должен стоять после формы, если вы хотите его поставить выше, то его нужно обрамлять в:
Автоматическая высота textarea по высоте с обращением к id
Для иллюстрации второго примера растягивания высоты поля textarea при наборе текста, нам опять потребуется поле textarea , но здесь скрипт будет обращаться к textarea по его id
Скрипт, который растягивает высоту textarea по содержимому
function flexibleTextarea(b) {
var a = document.getElementById(b) || b;
if (a) {
a.style.overflow = "hidden";
var e = a.rows = a.rows > 0 ? a.rows : 2;
b = a.cols = a.cols > 0 ? a.cols : 20;
var g = RegExp("([^\r\n]{" + b + "})([^\r\n])"),
f = RegExp("[^\n]{" + b + "}\n?$|[^\n]{0," + b + "}\n");
a.onkeyup = a.onkeydown = function () {
a.value = a.value.replace(g, "$1\r\n$2");
for (var c = 0, d = a.value; d.search(f) >= 0;) {
c++;
d = d.replace(f, "")
}
c += 2;
if (c < e) c = e;
a.rows = c
}
}
};
window.onload = function(){
flexibleTextarea('
flexibleTextarea('
}
Поскольку, здесь вызов функции обернут в
Пример автоматическое изменение высоты textarea по высоте с обращением к id
И для данного примера тоже сделали отдельный пример, на отдельной странице!
Скачать скрипт автоматическое изменение высоты textarea по высоте с обращением к id
Скачать скрипт автоматического растягивания textareaАвтоматическая высота textarea с использованием jQuery
Скрипт - автоматическая высота textarea с использованием jQuery
$(document).on("input", "textarea", function () {
$(this).outerHeight(38).outerHeight(this.scrollHeight);
});
Для данного скрипта не имеет значение расположение! Не нужно указывать дополнительных параметров!
Что скрипт, должен стоять после подключения библиотеки.
Пример растягивания textarea по высоте с использованием jQuery
Соберем всё перечисленное вместе и поместим на тестовую страницуСкачать скрипт автоматическая высота textarea с jQuery
скачатьAutosize по высоте textarea при помощи библиотеки autosize.js
Автоматическая высота textareaс использованием autosize.js, библиотеку можно скачать
Включение подключение библиотеки autosize.js
Пример автоматической высоты textarea при помощи библиотеки autosize.
Собираем все вместе и получаем тестовую страницу с autosize.jsСкачать библиотеку Autosize.js с тестовым файлом
скачатьContenteditable - как автоматическая высота блока
Это не касается поля ввода textarea, но отдельную страницу, пока не собираюсь делать страницу, а сюда точно в тему.
Как работает Contenteditable !?
Во внутрь тега помещаем атрибутРезультат:
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: