ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Растягиваемый резиновый по высоте autosize textarea

Тут подоспела тема резинового поля textarea. Есть множество способов и вариантов в javascript сделать поле растягиваемым. И естественно, что поскольку я всеми этими вещами занимаюсь, то есть у меня несколько вариантов.

Возможно вы найдете, что – то интересное для себя!

Начнем с того, что есть некоторые проблемы в том. Чтобы сделать правильное растягивание в textarea javascript и в некоторых случаях textarea неприятно прыгает!

Я лично, честно говоря, и не собирался создавать свой скрипт поскольку… знаний по теме растягиваемый textarea в javascript не хватает!

Ну что же… давайте приступим к некоторым вариантам, которые я так или иначе использую, и использовал в своих проектах… !

  1. Вариант №1 textarea растягивается по высоте с обращением через getElementsByTagName .

  2. В данном варианте не требуется обращаться к какому-то определенному textarea – просто устанавливаете данный код и он начинает работать, растягивая textarea по высоте в зависимости от высоты.

    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);

    }

  3. Вариант №2 textarea растягивается по высоте с обращением к ид(id).

  4. Для второго варианта обращения к textarea необходимо наличие у textarea id.

    Внутри функции flexibleTextarea - указываем идентификатор textarea

    Можно продублировав flexibleTextarea с другим ид сделать растягиваемый другой 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('идентификатор_textarea');

    flexibleTextarea('идентификатор_textarea_1');

    }

  5. Резиновый по высоте textarea при помощи jQuery

  6. Вам потребуется подключение сторонней библиотеки jQuery.

    После подключения, вставляем данный код … ну например вниз страницы, либо в какой-то файл js И textarea прекрасно растягивается по высоте…

    $(document).on("input", "textarea", function () {

    $(this).outerHeight(38).outerHeight(this.scrollHeight);

    });

  7. Autosize по высоте textarea при помощи библиотеки autosize.js

  8. Мы продолжаем разработку собственных комментариев и там возникает постоянная ошибка при растягивании textarea – я реально задолбался искать в чем причина… первый раз с таким сталкиваюсь, в предыдущей версии 1.3. использовал вариант с jQuery.
    Но в коментах не хотел использовать jQuery(разница в весе... в 20 раз(не то, чтобы дело в весе... просто каждый грамм у нас должен быть на счету... чем меньше объём разных скриптов и других вещей загрузка будет происходить быстрее! Да и потом, как-то тяготило то, что огромный кусок библиотеки тупо загружается и не используется...)) и вот нашел библиотеку autosize.js .

    Скачиваем… по выше идущей ссылке там есть кнопка Download

    Заходим в папку «dist» -там есть два файла autosize.min.js – сжатая библиотека весит 4кб.

    И второй вариант - autosize.js – стандартный код js файла – весит 8 кб.

    Бросаете один из фалов себе на сайт, подключаете, как обычный файл js.

    После подключения нужно активировать autosize:

    <script>

    autosize(document.querySelectorAll('textarea'));

    </script>

    Так же там есть и файл с примером в папке example

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019