HTML TextArea ridimensiona automaticamente

Mi piacerebbe avere un'area di testo sempre grande come il testo. In questo modo è possibile scorrere la pagina e nell'area di testo non è possibile scorrere.
Ecco quello che ho fatto fino ad ora:HTML TextArea ridimensiona automaticamente

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body {height: 100%;} 
textarea { 
border: none; 
width: 100%; 
height: 100%; 
-webkit-box-sizing: border-box; 
line-height: 44px; 
font-family:Helvetica; 
font-size: 17pt; 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
background-image:url('[email protected]'); 
outline: none; 
resize: none; 
} 
textarea.vert { resize:vertical; } 
</style></head><body> 
<textarea id="InputTextArea" placeholder="placeholder"></textarea> 
</body></html>

fonte

2013-06-24 Infinite Possibilities

possibile duplicato di [Creazione di una textarea con auto-ridimensionamento] (http: // StackOverflow .com/questions/454202/creating-a-textarea-with-auto-resize) –

Ho creato un pacchetto per questo se stai usando react: https://www.npmjs.com/package/react-fluid-textarea –

Ridimensionamento TeaxArea in base al numero di riga contenuti. Ecco un DEMO

function resizeTextarea (id) { 
    var a = document.getElementById(id); 
    a.style.height = 'auto'; 
    a.style.height = a.scrollHeight+'px'; 
} 

function init() { 
    var a = document.getElementsByTagName('textarea'); 
    for(var i=0,inb=a.length;i<inb;i++) { 
    if(a[i].getAttribute('data-resizable')=='true') 
     resizeTextarea(a[i].id); 
    } 
} 

addEventListener('DOMContentLoaded', init);

HTML

<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>

fonte

2013-06-24 22:14:55 shubhra

Questa è una risposta concisa, ma il risultato finale non è molto fluido. Il testo salta un bel po 'prima che l'area di input si espanda, portando a un'esperienza utente non proprio ideale. La risposta di Chris G. offre una soluzione molto migliore –

Se si utilizza AngularJS, si può fare:

<textarea ng-keyup="ctl.handleTextAreaHeight($event)"></textarea>

Con questo nel controller:

this.handleTextAreaHeight = function (e) { 
    var element = e.target; 

    element.style.overflow = 'hidden'; 
    element.style.height = 0; 
    element.style.height = element.scrollHeight + 'px'; 
};

fonte

2016-01-28 11:56:38 Ellone

Usa Bootstrap, Ha il classess, che includono classess che aumentano automaticamente l'altezza dell'area di testo, secondo il testo in esso

fonte

2016-01-28 12:02:44

... e i nomi delle classi sono ...? – infografnet

–

bootstrap fornisce lo stile anche ai tag –

HTML TextArea ridimensiona automaticamente

risposta

Problemi correlati