Hoe om 'n textarea outogrootte met behulp van Prototype?

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

Vra

Ek is tans besig om op 'n interne aansoek verkope vir die maatskappy Ek werk vir, en ek het 'n vorm wat die gebruiker toelaat om die lewering adres verander het.

Nou dink ek dit sou baie lekkerder kyk, as die textarea Ek gebruik vir die belangrikste adresbesonderhede net sou opneem die gebied van die teks in dit, en outomaties die grootte as die teks verander.

Hier is 'n kiekie van dit op die oomblik.

ISO-adres

Enige idees?

@Chris

'n goeie punt, maar daar is redes wat ek wil hê dit moet verander. Ek wil die area wat dit neem tot die gebied van die inligting daarin vervat wees. Soos jy kan sien in die skerm geskiet, as ek 'n vaste textarea, dit neem 'n billike klap van vertikale ruimte.

Ek kan die font te verminder, maar ek moet spreek groot en leesbaar te wees. Nou kan ek die grootte van die teks area te verminder, maar dan het ek probleme met mense wat 'n adres lyn wat 3 of 4 neem ( 'n mens 5) lyne. Hoef te hê die gebruiker gebruik 'n rolstaaf is 'n groot no-no.

Ek dink ek moet 'n bietjie meer spesifiek wees. Ek is na vertikale resizing, en die breedte nie soveel saak nie. Die enigste probleem wat gebeur met daardie, is die ISO nommer (die groot "1") kry onder die adres gestoot toe die breedte venster is te klein (soos jy kan sien op die skerm).

Dit gaan nie oor 'n gimick; dit gaan oor 'n teks veld die gebruiker kan wysig wat nie opneem onnodige ruimte, maar sal al die teks in dit wys.

Hoewel as iemand kom met 'n ander manier om die probleem te benader Ek is oop vir dit ook.

Ek het die kode 'n bietjie verander, want dit is wat 'n bietjie vreemd. Ek verander dit te aktiveer op keyup, omdat dit nie in ag sal neem die karakter wat net getik. 

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;
};
Was dit nuttig?

Oplossing

Facebook doen dit, wanneer jy skryf op mure se mense, maar slegs die grootte van vertikaal.

Horisontale grootte lyk my as 'n gemors, as gevolg van afbreking, lang rye, en so aan, maar vertikale grootte lyk redelik veilig en lekker om te wees.

Nie een van die Facebook-gebruik van-newbies Ek weet nog ooit iets daaroor of is verward genoem. Ek sal dit as anekdotiese bewyse om te sê 'gaan voort, implementeer dit gebruik.

Sommige JavaScript-kode om dit te doen, met behulp van Prototipe (want dit is wat ek is vertroud met ): 

<!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:. Dit is duidelik dat hierdie JavaScript-kode is baie naïef en nie goed getoets, en jy waarskynlik nie wil hê om dit te gebruik op teksbokse met romans in hulle, maar jy kry die algemene idee

Ander wenke

Een verfyning om sommige van hierdie antwoorde is om jou te laat CSS meer van die werk te doen.

Die basiese roete blyk te wees:

  1. Skep 'n houer element om die textarea en 'n versteekte div hou
  2. Die gebruik van JavaScript, hou die inhoud van die textarea se gesynchroniseerd met die div se
  3. Laat die leser die werk van die berekening van die hoogte van wat div
    4. doen
  4. Omdat die leser hanteer die lewering / sizing die verborge div, ons vermy uitdruklik opstel hoogte die textarea se. 

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>

Hier is nog 'n tegniek vir outoskalering n textarea.

  • Gebruik pixel hoogte in plaas van lyn hoogte: meer akkurate hantering van lyn draai as 'n proporsionele lettertipe gebruik
    • .
  • Aanvaar óf ID of element as insette
  • Aanvaar 'n opsionele maksimum hoogte parameter - (. Hou dit alles op die skerm, vermy breek uitleg, ens) nuttig as jy liewer nie toelaat dat die teks area groei buite 'n sekere grootte
  • Getoets op Firefox 3 en Internet Explorer 6

Code: (Plain vanilla 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";
   }
}

Demo: (Gebruik jQuery, gerig op die textarea ek tik in nou - as jy Firebug geïnstalleer, plak beide monsters in die konsole en toets op hierdie bladsy) 

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

Waarskynlik die kortste oplossing: 

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

Op hierdie manier wat jy nie enige verborge divs of iets soos dit nodig het.

Let wel:. Jy mag hê om te speel met this.style.height = (this.scrollHeight) + "px"; afhangende van hoe jy die textarea (lyn-hoogte, padding en daardie soort van dinge) styl

Hier is 'n Prototype weergawe van die grootte van 'n teks area wat nie afhanklik is van die aantal kolomme in die textarea. Dit is 'n uitstekende tegniek omdat dit laat jou toe om die teks area via CSS beheer asook hê veranderlike breedte textarea. Daarbenewens, hierdie weergawe vertoon die aantal oorblywende karakters. Hoewel dit nie versoek nie, dis 'n mooi nuttige funksie en is maklik as ongewenste verwyder. 

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

Skep die widget deur te bel new Widget.Textarea('element_id'). Die standaard opsies kan geneutraliseer word deur hulle verby as 'n voorwerp, bv new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). As jy wil om dit te skep vir al textareas op die bladsy, doen iets soos: 

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

Hier is 'n oplossing met JQuery: 

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

abc is 'n teaxtarea.

Gaan die skakel hieronder: 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
    });
});

Just herbesoek hierdie, het ek dit gedoen 'n bietjie netjieser (al is iemand wat vol bottel op prototipe / JavaScript kon verbeterings voor te stel?). 

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

Net noem dit met: 

new TextAreaResize('textarea_id_name_here');

Ek het iets baie maklik gemaak. Eerste het ek die textarea in 'n DIV. In die tweede plek het ek 'n beroep op die ready funksie om hierdie skrif. 

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

Eenvoudige. Dit is die maksimum hoogte van die div nadat dit gelewer, gedeel deur die hoogte van een textarea van een ry.

Ek benodig hierdie funksie vir myself, maar nie een van die kinders van hier gewerk as ek hulle nodig is.

Ek gebruik Orion se kode en verander dit.

Ek het ook in 'n minimum hoogte, sodat op die vernietig dit nie te klein nie. 

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

Soos die antwoord van @memical.

Maar ek het 'n paar verbeterings. Jy kan die jQuery height() funksie te gebruik. Maar bewus te wees van padding-top en padding-bottom pixels. Anders sal jou textarea te vinnig groei. 

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

My oplossing nie met behulp van jQuery (want soms het hulle nie aan dieselfde ding wees) is hieronder. Al is dit net getoets in Internet Explorer 7 , so die gemeenskap kan uitwys al die redes is dit verkeerd: 

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

Tot dusver het ek regtig soos hoe dit werk, en ek gee nie om oor ander blaaiers, so ek sal waarskynlik toe te pas op al my textareas: 

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

Hier is 'n uitbreiding van die prototipe widget wat Jeremy gepos op 4 Junie:

Dit stop die gebruiker uit te voer meer karakters as wat jy gebruik perke in textareas. Dit tjeks indien daar karakters oor. As die gebruiker kopieë teks in die textarea, is die teks afgesny by die maksimum. lengte: 

/**
 * 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 het 'n awesome oplossing vir die opstel van die hoogte van die textarea op pageload met jQuery, maar vir my aansoek Ek wou in staat wees om die hoogte van die textarea verhoog as die gebruiker meer inhoud bygevoeg. Ek gebou af oplossing memical se met die volgende: 

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

Dit is nie baie glad, maar dis ook nie 'n kliënt die gesig staar aansoek, so gladheid nie regtig saak nie. (Het so iets ooit kliënt-gesig staar, sou ek waarskynlik net gebruik om 'n motor-grootte jQuery plugin.)

Vir diegene wat kodering vir Internet Explorer en hierdie probleem teëkom. Internet Explorer het 'n bietjie truuk wat maak dit 100% CSS. 

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

Jy kan selfs 'n waarde vir rye = "N" wat IE sal ignoreer, maar ander blaaiers sal gebruik. Ek het regtig haat kodering wat Internet Explorer hacks implemente, maar hierdie een is baie nuttig. Dit is moontlik dat dit werk net in Quirks mode.

Internet Explorer, Safari, Chrome en Opera gebruikers nodig het om te onthou om explicidly stel die line-hoogte waarde in CSS. Ek doen 'n stylblad dat die aanvanklike properites stel vir alle teks bokse soos volg. 

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

Hier is 'n funksie wat ek net geskryf in jQuery om dit te doen - jy kan hawe dit te Prototipe , maar hulle het nie eens die "Lewendigheidstoets" van jQuery so elemente bygevoeg deur Ajax versoeke sal nie reageer.

Hierdie weergawe nie net groei, maar dit kontrakte ook wanneer verwyder of back space gedruk word.

Hierdie weergawe berus op jQuery 1.4.2.

Geniet;)

http://pastebin.com/SUKeBtnx

Gebruik: 

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

of (enige jQuery selector byvoorbeeld) 

$("textarea").textareacontrol();

Dit is getoets op Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5, en Chrome. Alle werk goed.

Die gebruik van ASP.NET, net eenvoudig dit te doen: 

<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>
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top