Mini-Efect JS: Textarea de lungime nelimitata

De multe ori micile dar simplele detalii pot impresiona cel mai mult un vizitator. De aceea, un input cu lungimea "nelimitata" este foarte bun cand avem texte lungi de redactat.

Noi ne putem folosii de evenimentul onkeyup care este apelat cand utilizatorul apasa o tasta in input.

1. Pe baza numarului de linii(\n)

Cand utilizatorul va tasta ceva noi vom calcula liniile din textarea(\n - enterul) si vom marii lungimea elementului textarea in conformitate cu liniile calculate.

Deci sa vedem exemplul urmator:

<textarea rows="3" onkeyup="this.rows=this.value.split('&#92;n').length+2;"></textarea>

Demo

Deci retine, pentru a crea a acest mini-efect trebuie sa adaugi urmatorul cod la atributele elementului textarea:

onkeyup="this.rows=this.value.split('&#92;n').length+2;"

2. Pe baza numarului de caractere

De data aceasta vom calcula numarului de caractere pentru a afla numarul de linii, stiind ca pe fiecare linie incape un numar fix de caractere(dat de atributul cols). De asemenea, vom aduna si numarul de linii(\n).

Studiaza urmatorul exemplu

<textarea rows="3" cols="50" onkeyup="var l=this.value.split('&#92;n').length+2; this.rows=this.value.length/this.cols+l;"></textarea>

Demo

Deci retine, pentru a crea a acest mini-efect trebuie sa adaugi urmatorul cod la atributele elementului textarea:

 onkeyup="var l=this.value.split('&#92;n').length+2; this.rows=this.value.length/this.cols+l;"

Tags: Tutoriale, Programare Web, Javascript Si Jquery