Come ridimensionare automaticamente un'area di testo utilizzando Prototype?

StackOverflow https://stackoverflow.com/questions/7477

Domanda

Attualmente sto lavorando su un'applicazione di vendita interna per l'azienda per cui lavoro e ho un modulo che consente all'utente di modificare l'indirizzo di consegna.

Ora penso che sarebbe molto più bello se l'area di testo che sto utilizzando per i dettagli dell'indirizzo principale occupasse semplicemente l'area del testo al suo interno e si ridimensionasse automaticamente se il testo fosse cambiato.

Eccone uno screenshot al momento.

ISO Address

Qualche idea?

@Chris

Un buon punto, ma ci sono ragioni per cui voglio ridimensionarlo.Voglio che l'area occupata sia l'area delle informazioni in esso contenute.Come puoi vedere nella schermata, se ho un'area di testo fissa, occupa una discreta quantità di spazio verticale.

Posso ridurre il carattere, ma ho bisogno che l'indirizzo sia grande e leggibile.Ora posso ridurre la dimensione dell'area di testo, ma ho problemi con le persone che hanno una riga dell'indirizzo che occupa 3 o 4 righe (una ne richiede 5).La necessità di far utilizzare all'utente una barra di scorrimento è un importante no-no.

Immagino che dovrei essere un po' più specifico.Sto cercando il ridimensionamento verticale e la larghezza non ha molta importanza.L'unico problema che si verifica è che il numero ISO (il grande "1") viene inserito sotto l'indirizzo quando la larghezza della finestra è troppo piccola (come puoi vedere nello screenshot).

Non si tratta di avere un trucco;si tratta di avere un campo di testo che l'utente può modificare che non occuperà spazio inutile, ma mostrerà tutto il testo in esso contenuto.

Tuttavia, se qualcuno trova un altro modo per affrontare il problema, sono aperto anche a quello.

Ho modificato un po' il codice perché si comportava in modo un po' strano.L'ho cambiato per attivarlo al keyup, perché non prenderebbe in considerazione il carattere appena digitato.

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;
};
È stato utile?

Soluzione

Facebook lo fa, quando scrivi sulle bacheche delle persone, ma ridimensiona solo in verticale.

Il ridimensionamento orizzontale mi sembra un disastro, a causa del ritorno a capo, delle righe lunghe e così via, ma il ridimensionamento verticale sembra essere abbastanza sicuro e piacevole.

Nessuno dei nuovi arrivati ​​che usano Facebook che conosco ha mai menzionato nulla al riguardo o è stato confuso.Lo userei come prova aneddotica per dire "vai avanti, implementalo".

Alcuni codici JavaScript per farlo, utilizzando Prototipo (perché è quello che conosco):

<!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>

PS:Ovviamente questo codice JavaScript è molto ingenuo e non ben testato, e probabilmente non vorrai usarlo su caselle di testo con romanzi al loro interno, ma hai un'idea generale.

Altri suggerimenti

Un perfezionamento di alcune di queste risposte è lasciare che i CSS svolgano la maggior parte del lavoro.

Il percorso base sembra essere:

  1. Crea un elemento contenitore per contenere il file textarea e un nascosto div
  2. Utilizzando Javascript, mantieni il file textareai contenuti di sono sincronizzati con div'S
  3. Lascia che sia il browser a calcolare l'altezza di quel div
  4. Poiché il browser gestisce il rendering/dimensionamento del file hidden div, evitiamo di impostare esplicitamente il textareal'altezza.

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}
html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
    width: 100%;
}
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>

Ecco un'altra tecnica per ridimensionare automaticamente un'area di testo.

  • Utilizza l'altezza dei pixel invece dell'altezza della linea:gestione più accurata del ritorno a capo se viene utilizzato un carattere proporzionale.
  • Accetta ID o elemento come input
  • Accetta un parametro opzionale di altezza massima, utile se preferisci non lasciare che l'area di testo cresca oltre una certa dimensione (mantieni tutto sullo schermo, evita di interrompere il layout, ecc.)
  • Testato su Firefox 3 e Internet Explorer 6

Codice:(JavaScript semplice vaniglia)

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";
   }
}

Dimostrazione:(utilizza jQuery, target nell'area di testo in cui sto scrivendo in questo momento, se ne hai Firebug installato, incolla entrambi i campioni nella console ed esegui il test in questa pagina)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

Probabilmente la soluzione più breve:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

In questo modo non avrai bisogno di div nascosti o cose del genere.

Nota:potresti dover giocare con this.style.height = (this.scrollHeight) + "px"; a seconda di come stili la textarea (altezza della linea, riempimento e quel genere di cose).

Ecco un Prototipo versione di ridimensionamento di un'area di testo che non dipende dal numero di colonne nell'area di testo.Questa è una tecnica superiore perché ti consente di controllare l'area di testo tramite CSS e di avere un'area di testo a larghezza variabile.Inoltre, questa versione visualizza il numero di caratteri rimanenti.Sebbene non sia richiesta, è una funzionalità piuttosto utile e può essere facilmente rimossa se indesiderata.

//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'));
  }
});

Crea il widget chiamando new Widget.Textarea('element_id').Le opzioni predefinite possono essere sovrascritte passandole come oggetto, ad es. new Widget.Textarea('element_id', { max_length: 600, min_height: 50}).Se vuoi crearlo per tutte le aree di testo della pagina, fai qualcosa del tipo:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});

Ecco una soluzione con JQuery:

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abc è un teaxtarea.

Controlla il link sottostante:http://james.padolsey.com/javascript/jquery-plugin-autoresize/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});

Solo rivisitandolo, l'ho reso un po' più ordinato (anche se qualcuno che è pieno di bottiglie Prototipo/JavaScript potrebbe suggerire miglioramenti?).

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

Basta chiamare con:

new TextAreaResize('textarea_id_name_here');

Ho fatto qualcosa di abbastanza semplice.Per prima cosa inserisco TextArea in un DIV.In secondo luogo, ho chiamato il ready funzione a questo script.

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

Semplice.È l'altezza massima del div una volta renderizzato, divisa per l'altezza di una TextArea di una riga.

Avevo bisogno di questa funzione per me, ma nessuna di quelle qui funzionava come ne avevo bisogno.

Quindi ho usato il codice di Orion e l'ho cambiato.

Ho aggiunto un'altezza minima, in modo che durante la distruzione non diventi troppo piccola.

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

Come la risposta di @memical.

Tuttavia ho riscontrato alcuni miglioramenti.Puoi usare jQuery height() funzione.Ma fai attenzione ai pixel di riempimento superiore e inferiore.Altrimenti la tua textarea crescerà troppo velocemente.

$(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);
  });
});

La mia soluzione che non utilizza jQuery (perché a volte non devono essere la stessa cosa) è riportata di seguito.Anche se è stato testato solo in Internet Explorer 7, in modo che la community possa indicare tutti i motivi per cui questo è sbagliato:

textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }

Finora mi piace molto come funziona e non mi interessano gli altri browser, quindi probabilmente lo applicherò a tutte le mie aree di testo:

// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');

for (i = 0; i<textareas.length; i++)
{
    // Retain textarea's starting height as its minimum height
    textareas[i].minHeight = textareas[i].offsetHeight;

    textareas[i].onkeyup = function () {
        this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
    }
    textareas[i].onkeyup(); // Trigger once to set initial height
}

Ecco un'estensione del widget Prototype che Jeremy ha pubblicato il 4 giugno:

Impedisce all'utente di inserire più caratteri se stai utilizzando i limiti nelle aree di testo.Controlla se sono rimasti dei caratteri.Se l'utente copia del testo nell'area di testo, il testo viene tagliato al massimo.lunghezza:

/**
 * 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'));
  }
});

@memical avevo una soluzione fantastica per impostare l'altezza dell'area di testo al caricamento della pagina con jQuery, ma per la mia applicazione volevo essere in grado di aumentare l'altezza dell'area di testo man mano che l'utente aggiungeva più contenuti.Ho creato la soluzione di Memical con quanto segue:

$(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));
        }
    });
});

Non è molto fluido ma non è nemmeno un'applicazione rivolta al client, quindi la fluidità non ha molta importanza.(Se fosse stato rivolto al client, probabilmente avrei utilizzato semplicemente un plug-in jQuery con ridimensionamento automatico.)

Per coloro che stanno codificando per IE e riscontrano questo problema.IE ha un piccolo trucco che lo rende CSS al 100%.

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

Puoi anche fornire un valore per rows="n" che IE ignorerà, ma verrà utilizzato da altri browser.Odio davvero la codifica che implementa gli hack di IE, ma questo è molto utile.È possibile che funzioni solo in modalità Quirks.

Internet Explorer, Safari, Chrome e musica lirica gli utenti devono ricordarsi di impostare esplicitamente il valore dell'altezza della riga nel CSS.Faccio un foglio di stile che imposta le proprietà iniziali per tutte le caselle di testo come segue.

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>

Ecco una funzione che ho appena scritto in jQuery per farlo: puoi portarla su Prototipo, ma non supportano la "vivacità" di jQuery, quindi gli elementi aggiunti dalle richieste Ajax non risponderanno.

Questa versione non solo si espande, ma si contrae anche quando si preme Canc o Backspace.

Questa versione si basa su jQuery 1.4.2.

Godere ;)

http://pastebin.com/SUKeBtnx

Utilizzo:

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

o (qualsiasi selettore jQuery per esempio)

$("textarea").textareacontrol();

È stato testato Internet Explorer 7/Internet Explorer 8, Firefox 3.5 e Chrome.Funziona tutto bene.

Utilizzando ASP.NET, basta semplicemente fare questo:

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top