Как автоизмерить текстовую область с помощью Прототипа?

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

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

Вот снимок экрана его в настоящее время.

ISO Address

Какие-либо идеи?


@Chris

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

Я могу уменьшить шрифт, но я должен обратиться, чтобы быть большим и читаемым. Теперь я могу уменьшить размер текстовой области, но затем у меня есть проблемы с людьми, у которых есть строка адреса, которая берет 3 или 4 (каждый берет 5), строки. Быть необходимостью, чтобы сделать, чтобы пользователь использовал полосу прокрутки, является майором нет - нет.

Я предполагаю, что должен быть немного более конкретным. Я после вертикального изменения размеров, и ширина не имеет значения так же. Единственной проблемой, которая происходит, с который, является число ISO (большое "1") продвинут под адресом, когда ширина окна является слишком маленькой (как Вы видите на снимке экрана).

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

Хотя, если кто-то придумывает другой способ приблизиться к проблеме, я открыт для этого также.


Я изменил код немного, потому что он действовал немного нечетный. Я изменил его для активации на keyup, потому что это не учтет символ, который был просто введен.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};
115
задан Nandini Venkateshan 3 January 2019 в 06:54
поделиться

6 ответов

Facebook делает это, когда Вы пишете на стенах людей, но только изменяет размеры вертикально.

Горизонтальный изменяют размеры, кажется мне, путаницей, из-за перехода на новую строку, длинные линии, и так далее, но вертикальный изменяют размеры, кажется, довольно безопасен и хорош.

Ни один из новичков использования Facebook, которых я знаю, ничего никогда не упоминал об этом или смущался. Я использовал бы это в качестве неподтвержденной информации, чтобы сказать 'разрешение, реализовать его'.

Некоторый код JavaScript, чтобы сделать это, с помощью Прототип (потому что это - то, что я знаком с):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

пз: Очевидно, этот код JavaScript очень наивен и не хорошо протестированный, и Вы, вероятно, не хотите использовать его на текстовых полях с романами в них, но Вы в общих чертах понимаете.

73
ответ дан Peter Mortensen 24 November 2019 в 02:25
поделиться

Просто пересмотрев это, я сделал его немного более опрятным (хотя кто-то, кто полная бутылка на Прототип / JavaScript, мог предложить улучшения?).

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

Просто это звонит с:

new TextAreaResize('textarea_id_name_here');
3
ответ дан Peter Mortensen 24 November 2019 в 02:25
поделиться

Вот другая техника для автокалибровки текстовой области.

  • пиксельная высота Использования вместо высоты строки: более точная обработка строки переносится, если пропорциональный шрифт используется.
  • Принимает или идентификатор или элемент, как введено
  • , Принимает дополнительный максимальный параметр высоты - полезный, если Вы скорее не позволили текстовой области вырасти вне определенного размера (сохраните все это на экране, постарайтесь не повреждать расположение, и т.д.)
  • Протестированный на Firefox 3 и Internet  Explorer  6

Код: (простая ваниль JavaScript)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if (!text)
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

   var adjustedHeight = text.clientHeight;
   if (!maxHeight || maxHeight > adjustedHeight)
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if (maxHeight)
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if (adjustedHeight > text.clientHeight)
         text.style.height = adjustedHeight + "px";
   }
}

Демонстрация: (использует jQuery, цели на текстовой области, в которую я ввожу прямо сейчас - если Вы имеете установленный Firebug, вставьте оба образца в консоль и тест на этой странице)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});
38
ответ дан Peter Mortensen 24 November 2019 в 02:25
поделиться

I needed this function for myself, but none of the ones from here worked as I needed them.

So I used Orion's code and changed it.

I added in a minimum height, so that on the destruct it does not get too small.

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};
2
ответ дан 24 November 2019 в 02:25
поделиться

Вот Прототип версия изменения размера текстовой области, которая не зависит от количества столбцов в текстовой области. Это превосходный метод, поскольку он позволяет вам управлять текстовой областью с помощью CSS, а также иметь текстовую область переменной ширины. Кроме того, в этой версии отображается количество оставшихся символов. Хотя это и не запрашивается, это довольно полезная функция, которую легко удалить, если она не нужна.

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

Создайте виджет, вызвав new Widget.Textarea ('element_id') . Параметры по умолчанию можно переопределить, передав их в виде объекта, например new Widget.Textarea ('element_id', {max_length: 600, min_height: 50}) . Если вы хотите создать его для всех текстовых полей на странице, сделайте что-нибудь вроде:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});
8
ответ дан 24 November 2019 в 02:25
поделиться

Вот расширение виджета Prototype, которое Джереми опубликовал 4 июня:

Оно не позволяет пользователю вводить больше символов, если вы используете ограничения в текстовых областях. Он проверяет, остались ли символы. Если пользователь копирует текст в текстовое поле, текст обрезается по максимуму. length:

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: http://stackoverflow.com/questions/7477/autosizing-textarea
 * Inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
 */
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options){
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function(){ 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    // Keep the text/character count inside the limits:
    if($F(this.textarea).length > this.options.get('max_length')){
      text = $F(this.textarea).substring(0, this.options.get('max_length'));
        this.textarea.value = text;
        return false;
    }

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters remaining'));
  }
});
1
ответ дан 24 November 2019 в 02:25
поделиться
Другие вопросы по тегам:

Похожие вопросы: