Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Фокусы с Textarea

February 25th, 2008 | Category: Javascript, Prototype, Script.aculo.us | Автор: Александр

qypeЧем textarea больше - тем туда удобнее вводить текст. Всё видно, ничего не надо скроллить. Только вот не всегда это красиво показывать на странице такие огромные текстовые поля. Более элегантный способ - это показать небольшую textarea, и если текст в неё не влезает - увеличить её размер динамически. Так мы и сделали на Qype.co.uk

Для работы скрипта нужны Prototype и Script.aculo.us.

PLAIN TEXT
JavaScript:
  1. Qype.ResizableTextArea = Class.create({
  2.  
  3.   min_height: 7,
  4.   margin: 1.2,
  5.   unit: "em",
  6.  
  7.   initialize: function(field) {
  8.     this.element = $(field);
  9.     this.element.setStyle({
  10.       height: this.min_height + this.unit,
  11.       overflow: "hidden"
  12.     });
  13.     this._resize();
  14.     this.element.observe('keyup', this._resize.bind(this));
  15.   },
  16.  
  17.   _resize: function() {
  18.     this.rows = this._calcRows();
  19.     this.height = (this.rows*this.margin) + this.margin;
  20.     if (this.height <this.min_height) this.height = this.min_height;
  21.     this.element.morph({height: (this.height + this.unit)}, {duration: .2});
  22.   },
  23.  
  24.   _calcRows: function() {
  25.     this.cols = this.element.getWidth() / 8;
  26.     this.rows = Math.floor(this.element.value.length / this.cols) + this.element.value.split("\n").length;
  27.     return this.rows
  28.   }
  29.  
  30. });

Теперь в HEAD достаточно написать:

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2.   document.observe('dom:loaded', function()
  3.   {
  4.     $$('textarea').each(function(el) {
  5.       new Qype.ResizableTextArea(el);
  6.     });     
  7.   });
  8. </script>

и все textarea на сайте станут менять свой размер динамически.

Посмотреть на скрипт в действии можно тут. Снизу есть форма Add Review и в ней textarea.

del.icio.us Забобрить!

15 Comments so far

  1. Максим Покровский February 25th, 2008 15:23

    Очень интересно и полезно. ИМХО, надо ввести это повсеместно. Правда скрипт в хедере мне не нравится.

  2. andead February 25th, 2008 16:30

    отлично! недавно видел это на jQuery, а вот теперь и на любимом прототайпе появилось :)

  3. aJIeks February 25th, 2008 16:40

    Пробовал использовать, но почемуто ни в какую textarea не хочет изменяться :(

  4. ACID Jesus February 25th, 2008 19:51

    Тормозит при быстром наборе, как собственно и все аналогичные скрипты (правда всего один на самом деле), которые я до этого видел 8-)

  5. Aleksandr February 26th, 2008 09:04

    Я думаю если пересчитывать размер поля не при каждом нажатии клавиатуры, как сейчас, то будет работать быстрее.

  6. Fr34k February 28th, 2008 02:02

    имхо супер, с удовольствием использую в новом движке своего сайта =). Замечу что это не первый финт который понравился, и очень нужен для развития ( веб лего )

  7. dimon April 19th, 2008 00:44

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

    ResizableTextArea

    Qype.ResizableTextArea = Class.create({
    min_height: 7,
    margin: 1.2,
    unit: “em”,

    initialize: function(field) {
    this.element = $(field);
    this.element.setStyle({
    height: this.min_height + this.unit,
    overflow: “hidden”
    });

    this._resize();
    this.element.observe(’keyup’, this._resize.bind(this));
    },

    _resize: function() {
    this.rows = this._calcRows();
    this.height = (this.rows*this.margin) + this.margin;
    if (this.height <this.min_height) this.height = this.min_height;
    this.element.morph({height: (this.height + this.unit)}, {duration: .2});
    },

    _calcRows: function() {
    this.cols = this.element.getWidth() / 8;
    this.rows = Math.floor(this.element.value.length / this.cols) + this.element.value.split(”\n”).length;
    return this.rows
    }
    });

    document.observe(’dom:loaded’, function()
    {
    $$(’textarea’).each(function(el) {
    new Qype.ResizableTextArea(el);
    });
    });

  8. dimon April 19th, 2008 00:44

    сорри, обрезало текст, все не поместилось(

  9. dimon April 19th, 2008 00:45

  10. dimon April 19th, 2008 00:49

    вот здесь разместил:

    http://www.adm-world.jino-net.ru/textarea/dynamic_txt.htm

  11. Александр April 19th, 2008 11:26

    dimon: Если ты внимательно почитаешь ошибки на своей странице то увидишь вот такую:

    Qype is not defined

    перед этой строкой

    Qype.ResizableTextArea = Class.create({

    напиши

    var Qype = {};

    и всё заработает. Рекомендую выбрать другое имя для своего именного пространства. Мы выбрали Qype, потому что так называется наш сайт.

  12. dimon April 19th, 2008 22:38

    ура!!!

    Большое спасибо, Александр!!! Все заработало!

    Ты супер!!! Теперь буду разбираться, КАК все это работает)

  13. dimon April 19th, 2008 23:08

    хм, получился странный глюк, новые строки добавляются нормально, но если строка слишком длинная, то
    не появляется полоса прокрутки (

  14. Александр April 20th, 2008 15:12

    dimon: действительно :)

    попробуй заменить

    overflow: “hidden”

    на

    ‘overflow-y’: “hidden”

    Кавычки исправь только. Wordpress их поганит.

  15. dimon April 21st, 2008 00:14

    спасибо за советы)

Leave a reply