Aumentare le dimensioni di una textarea in funzione delle righe presenti.

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Buongiorno a tutti, rieccomi con la mia ormai domanda quotidiana :)
Il sorriso sia chiaro è di gratitudine, pensando alla vostra infinita pazienza.
Tornando al mio problema ho questa funzione che mi inserisce in una textarea il valore di un array

HTML:
             var stemmak = []
               
stemmak[0]="";
stemmak[1]="Altavilla";
stemmak[2]="Asburgo Impero";
stemmak[3]="Asburgo Lorena";
stemmak[4]="Baden";
stemmak[5]="Baviera";
stemmak[6]="Sassonia \n Coburgo \n Gotha";
.........................

function scrivistemma() {  
                                   

                              for(var y = 1; y <= stemmak.length; y++) {
                               
                                            stemtn = stemmak[y]; 

                                    document.getElementById("tex"+y).value = stemtn;

                                       } }     

// e questa è la textarea
<textarea class="area" id ="tex1"  name="fine1" cols="6" rows="1" style="display:block"></textarea>

A volte succede che il valore dell'array deve andare su più righe e per evitare lo scroll a lato desidero che la textarea aumenti in qutomatico cioè il suo .rows aumenti quante sono le righe .

Cercando in rete e con la mia misera conoscenza ho messo su questo :

HTML:
           function autoresize()
               {  
for ( 
            	var ta =  getElementById("tex6").value;
                      var tt  = ta;
        		var st  = 0;
                  	var ct  = 1;
             	while((st=tt.indexOf('\n', (st+1)))!=-1)
           		ct++;
		
           	document.getElementById("tex"+y).style.rows = ct;
	
         }

ma non va.... :(
Mi suggerite per favore...
Grazie . Domenico.
 
sostituiscila al tuo codice:
PHP:
function scrivistemma() {  
                               

                              for(var y = 1; y <= stemmak.length; y++) {
											oTextArea = document.getElementById("tex"+y);
											
											
                                            stemtn = stemmak[y]; 
											aTemp = stemtn.split(' \n ');
											iNum = aTemp.length;
											
											if(iNum > oTextArea.rows)
												oTextArea.rows += iNum
											if(aTemp[0].length > oTextArea.cols)
												oTextArea.cols = aTemp[0].length 
											oTextArea.value = stemtn;

                               }}

Dovrebbe funzionare
 
Ti ringrazio tantissimo ma purtroppo non posso usare il php, devo inserire lo script poi in un blog che legge solo javascritp/html....
Sei stato cmq gentilissimo..... :)
 
Ti ringrazio tantissimo ma purtroppo non posso usare il php, devo inserire lo script poi in un blog che legge solo javascritp/html....
Sei stato cmq gentilissimo..... :)

è javascript ;)

P.S. ho messo che se non entra il nome riga per riga aumenta anche le colonne per fare entrare i nomi, per toglierlo commenta queste righe:
if(aTemp[0].length > oTextArea.cols)
oTextArea.cols = aTemp[0].length
 
Ultima modifica:
Sincero.... appena ho guardato scritto sopra : codice PHP manco ho letto... :(
Beh... sono cpace anche di questo... perdonatemi....
ma solo una curiosità....
almeno per capire di più.... come cerco sempre di fare.. se non ti scoccia...
puoi inserirmi in modo umano il ciclo wile, sorriderai ma mi sono incartato a mettere le condizione del wile e l'indeof.... :(
Grazie davvero.... adesso cmq faccio prova con il tuo script :)
 
questa è la pagina di prova che mi sono fatto:
HTML:
<script>
             var stemmak = []
               
stemmak[0]="";
stemmak[1]="Altavilla";
stemmak[2]="Asburgo Impero";
stemmak[3]="Asburgo Lorena";
stemmak[4]="Baden";
stemmak[5]="Baviera";
stemmak[6]="Sassonia \n Coburgo \n Gotha";
//.........................

function scrivistemma() {  
                               

                              for(var y = 1; y <= stemmak.length; y++) {
											oTextArea = document.getElementById("tex"+y);
											
											
                                            stemtn = stemmak[y]; 
											aTemp = stemtn.split('\n');
											iNum = aTemp.length;
											
											if(iNum > oTextArea.rows)
												oTextArea.rows += iNum
											if(aTemp[0].length > oTextArea.cols)
												oTextArea.cols = aTemp[0].length 
											oTextArea.value = stemtn;

                               }}     

// e questa è la textarea

</script>

<textarea class="area" id ="tex1"  name="fine1" cols="6" rows="1" style="display:block"></textarea>
<textarea class="area" id ="tex2"  name="fine6" cols="6" rows="1" style="display:block"></textarea>
<textarea class="area" id ="tex3"  name="fine5" cols="6" rows="1" style="display:block"></textarea>
<textarea class="area" id ="tex4"  name="fine4" cols="6" rows="1" style="display:block"></textarea>
<textarea class="area" id ="tex5"  name="fine3" cols="6" rows="1" style="display:block"></textarea>
<textarea class="area" id ="tex6"  name="fine2" cols="6" rows="1" style="display:block"></textarea>
<script>
scrivistemma();
</script>

Non utilizzo la funzione autoresize() che hai trovato.

Per commenta intendo questo:

HTML:
/*
if(aTemp[0].length > oTextArea.cols)
          oTextArea.cols = aTemp[0].length 
*/
 
Ultima modifica:
wow funzionaaaaaaaaaa :))
Grazie..... davvero..... gentilissimo...
ma devo essere sincero.... me lo devo studiare passaggio per passaggio... se non faccio l'ebete che copia... poi ti riscrivo cosa hai fatto....

Intanto se non ti spiace.... almeno per curiosità puoi rivedere la prima funzione che ho postato e come devo mettere quell'accidenti di wile condizione con l'index ??
sempre se vuoi eh... sia ben chiaro... :)
Ciao.
Domenico.
 
ah commenta cioè non leggere queste righe comprese nei due /* e */
ok ok... avevo immaginato ma non non fare figuracce ho taciuto :)
 
ora sto in ufficio e non posso starci troppo dietro, ma se ho capito bene la logica nel while passi tt.indexOf.... mentre tu devi cercarlo nel value della textarea che se non ho capito male è ta, quindi dovrebbe essere ta.indexOf...
Comunque non mi piace molto come è scritta in generale :P
 
Allora te come hai fatto, prima cosa hai assegnato il valore dell'elemento Dom ad una variabile, poi in stemp hai cercato quante volte c'era il : \n e come fosse un array ti sei fissato una lunghezza del vettore di quanti elementi c'erano .
Se i \n in numero superiori al valore della rows aumenti la rows con il valore del vettore con *= e poi assegni il valore value all'oggetto dom cosi modificato.
Ci ho azzeccato vero ? :)
 
in generale si...
ecco il codice commentato:
Codice:
function scrivistemma() {  
	for(var y = 1; y <= stemmak.length; y++) 
	{
								  
	//salvo "l'oggetto" textArea in una variabile
	oTextArea = document.getElementById("tex"+y);


												stemtn = stemmak[y]; 
	// trasformo la stringa in array, divido la striga per ogni \n trovato
	aTemp = stemtn.split('\n');
	//conto l'array e metto il risultato in una varibile
	iNum = aTemp.length;

	// se il numero dei valori dell'array è maggiore dell'attributo rows aggiungo iNum righe
	if(iNum > oTextArea.rows)
		oTextArea.rows += iNum

	//Metto il valore nella textarea
	oTextArea.value = stemtn;

	}
}
 
Si si ... la tua descrizione è stata perfetta.... :)
Ho omesso che con lo split l'array di suddivideva e detto direttamente che ti contai i \n, hai ragione, poco chiaro io nella fretta....
Davvero gentile e grazie ancora :)
 

Discussioni simili