Esiste comunque l'altezza di "autofit" dell'area di testo in base al contenuto al caricamento della pagina?

Question

È comunque possibile tramite CSS o Javascript impostare l'altezza della textarea in base al contenuto? Ho un'altezza hardcoded nel mio CSS ma volevo che fosse impostato di default in modo che non ci fosse una barra di scorrimento verticale sul caricamento della pagina?

Answer 1

Come circa http://www.jacklmoore.com/autosize/ Rilascia automaticamente in qualsiasi pagina web e dovrebbe funzionare. La fonte è breve e ben commentata se sei curioso di sapere come funziona.

// Example: 
$(document).ready(function(){ 
    $('textarea').autosize(); 
}); 

Fonte: https://github.com/jackmoore/autosize

Demo: http://www.jacklmoore.com/autosize/

Answer 2

È possibile utilizzare il ridimensionamento automatico plug-in utilizzando il jQuery UI Autoresize

Qui è il codice html,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script 
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script> 
<textarea></textarea> 

ed ecco il jquery,

$('textarea').autoResize(); 

vedere DEMO

Answer 3

Hey può andare con il plugin ExpandingTextArea in cui un elemento pre clone di invisibile è mantenuto dietro la textarea. Ogni volta che l'altezza di questo pre cambia, la textarea viene aggiornata.

E 'semplice, basta includono "expanding.js" e "jQuery" nella tua pagina e classe add "in espansione" per la textarea a cui u bisogno di espandersi.

<script src='expanding.js'></script> 
<textarea class='expanding'></textarea> 

Seguire the link per maggiori dettagli e demo

Nota: Si lavorerà sul carico documento per i testi già aggiunti

Answer 4

senza plugin si potrebbe fare qualcosa di simile

$(document).ready(function(){ 
    elem=document.getElementById('#elemid'); 
    while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)} 
}); 

Ridimensionare la textarea mentre fa ve una barra di scorrimento (quindi elem.clientHeight < elem.scrollHeight). Puoi farlo abbastanza facilmente anche senza JQuery, in semplice javascript.

Non ha testato il codice, è solo il "concetto".

EDIT: mi Dumb, è molto più facile, nessun cicli ...

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px"; 

Answer 5

Non so perché, ma sembra che il mio motore di ricerca mi ha portato un'altra soluzione (un "How-To" Tutorial):

http://www.sitepoint.com/build-auto-expanding-textarea-3/

EDIT:

ecco il codice ..

/** 
* TextAreaExpander plugin for jQuery 
* v1.0 
* Expands or contracts a textarea height depending on the 
* quatity of content entered by the user in the box. 
* 
* By Craig Buckler, Optimalworks.net 
* 
* As featured on SitePoint.com: 
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/ 
* 
* Please use as you wish at your own risk. 
*/ 

/** 
* Usage: 
* 
* From JavaScript, use: 
*  $(<node>).TextAreaExpander(<minHeight>, <maxHeight>); 
*  where: 
*  <node> is the DOM node selector, e.g. "textarea" 
*  <minHeight> is the minimum textarea height in pixels (optional) 
*  <maxHeight> is the maximum textarea height in pixels (optional) 
* 
* Alternatively, in you HTML: 
*  Assign a class of "expand" to any <textarea> tag. 
*  e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea> 
* 
*  Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height. 
*  e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea> 
*  The textarea will use an appropriate height between 50 and 200 pixels. 
*/ 

(function($) { 

    // jQuery plugin definition 
    $.fn.TextAreaExpander = function(minHeight, maxHeight) { 

     var hCheck = !($.browser.msie || $.browser.opera); 

     // resize a textarea 
     function ResizeTextarea(e) { 

      // event or initialize element? 
      e = e.target || e; 

      // find content length and box width 
      var vlen = e.value.length, ewidth = e.offsetWidth; 
      if (vlen != e.valLength || ewidth != e.boxWidth) { 

       if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px"; 
       var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax)); 

       e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden"); 
       e.style.height = h + "px"; 

       e.valLength = vlen; 
       e.boxWidth = ewidth; 
      } 

      return true; 
     }; 

     // initialize 
     this.each(function() { 

      // is a textarea? 
      if (this.nodeName.toLowerCase() != "textarea") return; 

      // set height restrictions 
      var p = this.className.match(/expand(\d+)\-*(\d+)*/i); 
      this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0); 
      this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999); 

      // initial resize 
      ResizeTextarea(this); 

      // zero vertical padding and add events 
      if (!this.Initialized) { 
       this.Initialized = true; 
       $(this).css("padding-top", 0).css("padding-bottom", 0); 
       $(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea); 
      } 
     }); 

     return this; 
    }; 

})(jQuery); 


// initialize all expanding textareas 
jQuery(document).ready(function() { 
    jQuery("textarea[class*=expand]").TextAreaExpander(); 
}); 

ho lasciato i commenti nel codice dal momento che non è il mio lavoro;)

Answer 6

testato in cromo

soluzione Pure javascript (Nessun plugin, No jquery)

in azione: fiddle

Ho creato 3 funzioni ns:

• altezza della linea get
• numero get di linee
• impostare l'altezza della textarea durante la digitazione (evento di input)

//attach input event 
 
    document.getElementById('ta').addEventListener('input', autoHeight, false); 
 

 
    function autoHeight(e){ 
 
     var lh = getLineHeightInPixels(e.target); 
 
     var nol = getNumberOfLines(e.target); 
 
     var ht = lh * nol; 
 
     e.target.style.height = ht + 'px'; 
 
    } 
 

 
    function getNumberOfLines(el){ 
 
     var text = el.value 
 
     var lines = text.split(/\r|\r\n|\n/); 
 
     return lines.length; 
 
    } 
 

 
    function getLineHeightInPixels(el){ 
 

 
     var tempDiv = document.createElement('div'); 
 

 
     tempDiv.style.visibility = 'hidden'; 
 

 
     tempDiv.style.fontFamily = getComputedStyle(el).getPropertyValue('font-family'); 
 
     tempDiv.style.fontSize = getComputedStyle(el).getPropertyValue('font-size'); 
 
     tempDiv.style.lineHeight = getComputedStyle(el).getPropertyValue('line-height'); 
 
     tempDiv.style.fontVariant = getComputedStyle(el).getPropertyValue('font-variant'); 
 
     tempDiv.style.fontStyle = getComputedStyle(el).getPropertyValue('font-style'); 
 

 
     tempDiv.innerText = 'abcdefghijklmnopqrstuwxyz'; 
 

 
     document.documentElement.appendChild(tempDiv); 
 

 
     var ht = parseInt(getComputedStyle(tempDiv).getPropertyValue('height')) 
 

 
     document.documentElement.removeChild(tempDiv); 
 
     return (ht); 
 
    } 
 

 
    //set height on document load 
 
    document.addEventListener('DOMContentLoaded', function(){document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';}, false);

<textarea id="ta"></textarea>

Answer 7

Se non ti dispiace una scollbar dentro area di testo è possibile utilizzare

$(document).ready(function(){ 
    tx = $('#textarea') 
    tx.height(tx.prop('scrollHeight')); 

}) 

ed ecco un Fiddle

un'altra Fiddle questo ha min e max-width set.

ma con plug-in come auto-size

l'altezza della casella di testo aumenta con ingresso.

o si può provare questo plug-in

Answer 8

L'unica css che uso in basso a textarea è la sua width, non è necessario di una prima height. overflow non dovrebbe essere necessario sia come scrollHeight che verrà utilizzata è:

una misura dell'altezza del contenuto di un elemento del tenore non visibile sullo schermo a causa di overflow.

scrollHeight: MDN

Se si desidera lavorare con Internet Explorer, però, allora è necessario utilizzare overflow: auto altrimenti IE insiste su l'aggiunta di una barra di scorrimento verticale (anche se non c'è nulla da scorrere).

Si noti che non è necessario specificare lo width, ma è la proprietà che viene impostata più comunemente in relazione a questo argomento.

Ciò è necessario il codice JavaScript:

document.addEventListener("DOMContentLoaded", function(event) { 
    var ta = document.getElementById('ta'); 
    ta.style.height = ta.scrollHeight + 'px'; 
}); 

Quando il DOM ha caricato il height del textarea è impostato al suo scrollHeight.

Ecco una pagina completa per il test:

<!DOCTYPE html> 
<html> 
<head> 
<title>Some Title</title> 
<style> 
textarea { 
    width: 300px; 
    overflow: auto; 
} 
</style> 
</head> 
<body> 
    <textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea> 
<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
     var ta = document.getElementById('ta'); 
     ta.style.height = ta.scrollHeight + 'px'; 
    }); 
</script> 
</body> 
</html> 

---

Se necessario, il codice può essere applicato a tutte le textarea nella pagina:

document.addEventListener("DOMContentLoaded", function(event) { 
    var tas = document.getElementsByTagName('textarea'); 
    for (var i=0; i < tas.length; i++) { 
     tas[i].style.height = tas[i].scrollHeight + 'px'; 
    } 
}); 

Answer 9

A nice solution

JSFiddle

HTML

<div id="container"> 
    <textarea > 
    1 
    12 
    123 
    1234 
    12345 
    123456 
    1234567 
    </textarea> 
</div> 

CSS

div#container textarea { 
    overflow-y: hidden; /* prevents scroll bar flash */ 
    padding-top: 1.1em; /* prevents text jump on Enter keypress */ 
} 

JQuery

// auto adjust the height of 
$('#container').on('keyup', 'textarea', function (e){ 
    $(this).css('height', 'auto'); 
    $(this).height(this.scrollHeight); 
}); 
$('#container').find('textarea').keyup(); 

Answer 10

Ecco una soluzione javascript pura. Nessun jquery, nessun plugin, ecc. DEMO

Quindi come funziona? Supponiamo di avere una dimensione del font/line-height/ecc. Bene, la tua textarea contiene circa 11 caratteri per 100 px di larghezza. Se possiamo tenerlo a mente, possiamo usare questa funzione.

function textareaSetSize(elem, width) 
{ 
    var length = elem.value.length; 
    //about 11 characters per 100 pixels 
    var estimatedLines = Math.round(length/(width/100*11)); 
    //alert('Estimated number of lines: ' + length); 
    elem.style.width = width + 'px'; 
    elem.rows = estimatedLines; 
} 

poi ..

var selector = document.getElementsByClassName('textarea'); 
    for(var i = 0; i < selector.length; i++) 
    { 
     selector[i].onkeyup = function(){ 
      textareaSetSize(this, 400); 
     }; 
    } 

html ...

<button id="reset">Empty</button> 
<textarea class="textarea" id="autosize"></textarea> 
<textarea class="textarea" id="autosize2"></textarea> 
<textarea class="textarea" id="autosize3"></textarea> 
<textarea class="textarea" id="autosize4"></textarea> 

runnning esso ...

textareaSetSize(ta, 500); 
textareaSetSize(ta2, 400); 
textareaSetSize(ta3, 400); 
textareaSetSize(ta4, 400); 

Questa non è una soluzione perfetta, quindi se vedi un'innovazione fammi sapere.