Как заставить поле ввода растягиваться по мере заполнения текстом

На сайтах, при введении каких то данных или комментариев, особенно если Ваш комментарий емкий, со ссылками, ругательствами или кодами, то неизбежно появляется вертикальная полоса прокрутки. Так же в админ панелях различных CMS, при написании статей Вы столкнетесь с тем же неудобством.

Попробуем создать себе и посетителям Вашего сайта удобную форму ввода. Надеюсь она есть на Вашем сайте, т.к. с чем то все же придется экспериментировать.

Выглядит сейчас

Сейчас наша форма ввода в комментариях выглядит так. После данного урока при вводе текста форма будет растягиватся вниз не меняя дизайна сайта, без полосы прокрутки.

И так начнем.

  1. У Вас должна быть подключена библиотека jQuery, т.е. в head должна быть строка похожая на эту:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>

    Если нет таковой, добавляем, иначе нет нам дороги далее.

  2. Теперь надо определить какой у Вашей формы ввода class или id. Для того в браузере, возму распространенную Opera ► Страница ► Средства разработки ► Opera Dragonfly, далее кликнуть по интересующему элементу, а именно по форме ввода.

     

    id Формы ввода

     

    Я определи его как id="edit-coment", а Вы?

  3. Далее качаем скрипт jquery.elastic.source.zip, распаковываем и заливаем на сервер. В Вашей теме сайта наверняка существует папка js или scripts. В одну из этих папок залейте распакованный скрипт и запомните, а лучше запишите путь к скрипту.
  4. Работаем с head. Подключаем наш скрипт. Вставляем следующую строку: Например для WordPress она выглядит так
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery.elastic.source.js"></script>

    Суть в том чтобы прописать путь к данному файлу и браузер мог его считать. Теперь укажем скрипту наш id, в моем случае это id="edit-coment", у Вас свой. И дописываем в head следующий код

    <script type='text/javascript'>
     //<![CDATA[
     $(window).load(function(){
     $('#edit-coment').elastic();
     });
     //]]>
    </script>

    Не переживайте, если у Вас class, просто замените # на точку, т.е. не #edit-coment, а .edit-coment.

Вот в прочем и все что я хотел показать.

Удачи в экспериментах!

© Компания Вебджем.рф 2009 - 2015 | Заказ сайтов webmaster@вебджем.рф


Яндекс.Метрика