Как автоматически изменить размер текстовой области с помощью Prototype? - PullRequest
Новая
       171

Как автоматически изменить размер текстовой области с помощью Prototype?

113 голосов
/ 11 августа 2008

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

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

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

ISO Address

Есть идеи?

@ Крис

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

Я могу уменьшить шрифт, но мне нужно, чтобы адрес был большим и читаемым. Теперь я могу уменьшить размер текстовой области, но у меня возникают проблемы с людьми, у которых адресная строка занимает 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;
};

Ответы [ 18 ]

2 голосов
/ 11 сентября 2011

Как и ответ @ memical.

Однако я обнаружил некоторые улучшения. Вы можете использовать функцию jQuery height(). Но следует помнить о пикселях padding-top и padding-bottom. В противном случае ваша текстовая область будет расти слишком быстро. 

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});
2 голосов
/ 03 июня 2009

Мне была нужна эта функция для себя, но ни одна из них не работала так, как мне нужно.

Итак, я использовал код Ориона и изменил его.

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

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;
};
1 голос
/ 14 июня 2013

Для тех, кто кодирует IE и сталкивается с этой проблемой. В IE есть небольшая хитрость, которая делает его 100% CSS. 

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

Вы можете даже указать значение для row = "n", которое IE будет игнорировать, но другие браузеры будут использовать. Я действительно ненавижу кодирование, которое реализует взломы IE, но это очень полезно. Возможно, он работает только в режиме Quirks.

1 голос
/ 22 февраля 2013

Используя ASP.NET, просто сделайте это: 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>
1 голос
/ 04 января 2011

@ memical было отличным решением для установки высоты текстовой области при загрузке страницы с помощью jQuery, но для моего приложения я хотел иметь возможность увеличить высоту текстовой области, поскольку пользователь добавил больше контента. Я построил решение мемуала со следующим: 

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

Это не очень гладко, но это также не приложение для клиентов, поэтому плавность не имеет значения. (Если бы это было обращено к клиенту, я, вероятно, просто использовал бы плагин jQuery с автоматическим изменением размера.)

1 голос
/ 30 ноября 2009

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

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

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: /10526/kak-avtomaticheski-izmenit-razmer-tekstovoi-oblasti-s-pomoschy-prototype
 * 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 голос
/ 22 июня 2010

Вот функция, которую я только что написал в jQuery, чтобы сделать это - вы можете перенести ее на Прототип , но они не поддерживают "живость" jQuery, поэтому элементы, добавленные запросами Ajax, не будут отвечать .

Эта версия не только расширяется, но и сокращается при нажатии клавиши удаления или возврата.

Эта версия опирается на jQuery 1.4.2.

Наслаждайся;)

http://pastebin.com/SUKeBtnx

Использование: 

$("#sometextarea").textareacontrol();

или (например, любой селектор jQuery) 

$("textarea").textareacontrol();

Он был протестирован на Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5 и Chrome. Все отлично работает.

1 голос
/ 12 января 2010

Internet Explorer, Safari, Chrome и Opera пользователи должны помнить, чтобы явно установить значение высоты строки в CSS. Я делаю таблицу стилей, которая устанавливает начальные свойства для всех текстовых полей следующим образом. 

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>
Страница:
...