Textarea da ridimensionare in base alla lunghezza del contenuto

Ho bisogno di un’area di testo in cui digito il mio testo nella casella, cresce di lunghezza in base alle esigenze per evitare di dover gestire le barre di scorrimento e deve ridursi dopo aver eliminato il testo! Non volevo percorrere la via mootools o jquery perché ho una forma leggera.

Puoi controllare l’altezza del contenuto impostando su 1px e quindi leggendo la proprietà scrollHeight :

 function textAreaAdjust(o) { o.style.height = "1px"; o.style.height = (25+o.scrollHeight)+"px"; } 
  

Puoi anche provare l’attributo contenteditable su un normale p o div . Non proprio una textarea ma si ridimensionerà automaticamente senza script.

 < !DOCTYPE html>  
Hello World

È stata implementata una soluzione jquery e il codice sorgente è disponibile in github all’indirizzo: https://github.com/jackmoore/autosize .

Usa questa funzione:

 function adjustHeight(el){ el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px"; } 

Usa questo html:

  

E finalmente usa questo css:

 textarea { min-height: 60px; overflow-y: auto; word-wrap:break-word } 

La soluzione è semplicemente lasciare che la barra di scorrimento appaia per rilevare che l’altezza deve essere regolata, e ogni volta che la barra di scorrimento appare nell’area di testo, regola l’altezza proprio come per hide nuovamente la barra di scorrimento.

La risposta di Alciende non ha funzionato per me in Safari per qualche ragione, ma dopo una piccola modifica:

 function textAreaAdjust(o) { o.style.height = "1px"; setTimeout(function() { o.style.height = (o.scrollHeight)+"px"; }, 1); } 

Spero che questo aiuti qualcuno

Non penso che ci sia un modo per ottenere la larghezza dei testi in caratteri a larghezza variabile , specialmente in javascript.

L’unico modo che posso pensare è di creare un elemento nascosto con larghezza variabile impostato da css, inserire il testo nel suo innerHTML e ottenere la larghezza di quell’elemento. Quindi potresti essere in grado di applicare questo metodo per far fronte al problema di ridimensionamento automatico dell’area di testo.

È ansible ottenere questo utilizzando uno span e una textarea.

Devi aggiornare lo span con il testo in textarea ogni volta che il testo viene modificato. Quindi imposta la larghezza e l’altezza css della textarea alla proprietà clientWidth e clientHeight dello span.

Per esempio:

 .textArea { border: #a9a9a9 1px solid; overflow: hidden; width: expression( document.getElementById("spnHidden").clientWidth ); height: expression( document.getElementById("spnHidden").clientHeight ); } 

Decidi una larghezza e controlla quanti caratteri può contenere una riga, e poi per ogni tasto premuto chiami una funzione che assomiglia a qualcosa:

 function changeHeight() { var chars_per_row = 100; var pixles_per_row = 16; this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + 'px'; } 

Non ho testato il codice.

Un metodo è farlo senza JavaScript e questo è qualcosa del genere: