Numărătoare în textarea


Vă invit să vedem în continuare ceva simplu pentru avansaţi, bun de ştiut pentru începători: cum numărăm câte caractere sunt scrise într-un câmp textarea. Am văzut aşa ceva, nu?, pe zeci de situri, în special pe cele care limitează numărul de caractere ce pot fi scrise/trimise. Cum se face? Evident că foarte simplu. În demonstraţia de mai jos mă voi folosi de jQuery pentru simplul fapt că e mai uşor aşa, dar se poate face desigur şi fără.

Pe scurt urmărim evenimentul onKeyUp pe câmpul textarea. La fiecare ridicare a degetului de pe o tastă va fi apelată funcţia contor(). Aceasta ia ce s-a scris în câmpul textarea şi într-un div scrie câte caractere are ceea ce s-a scris. Evident, se poate interveni ca peste un număr de n caractere să nu mai permită scrierea, dar aici ne limităm la numărat. Vreţi să vedeţi codul de mai jos în execuţie? Mergeţi aici şi scrieţi ceva în boxa textarea din dreapta de tot (din panoul Result).

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<title>Numaratoare 1</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
	function contor(){
		textul=$("#textul").val();
		$("#contor").html("Aţi scris "+textul.length+" caractere.");
	}
</script>
<textarea id="textul" cols="50" rows="10" onKeyUp="contor();"></textarea>
<div id="contor"></div>
</body>
</html>

Acum haideţi să ridicăm ştacheta. Nu dorim să numărăm câte caractere sunt, ci de câte ori apare litera a, sau câte linii am scris. Pentru aceasta vom avea nevoie desigur de o funcţie pentru a număra câte apariţii sunt ale unui substring într-un string. JavaScript nu oferă nativ aşa ceva, dar evident netul e plin de variante, precum cea inclusă mai jos (funcţia aparitii()). Vreţi să vedeţi codul de mai jos în execuţie? Mergeţi aici şi scrieţi ceva în boxa textarea din dreapta de tot (din panoul Result).

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<title>Numaratoare 1</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
	function contor(){
		textul=$("#textul").val();
		raspuns="Aţi scris "+textul.length+" caractere.<br>";
		raspuns+="Aţi scris de "+aparitii(textul,"a")+" ori litera 'a'.<br>";
		raspuns+="Aţi scris în total "+(aparitii(textul,"\n")+1)+" rânduri.";
		$("#contor").html(raspuns);
	}
	function aparitii(string, substring){
		var n=0;
		var pos=0;
		while(true){
			pos=string.indexOf(substring,pos);
			if(pos!=-1){
				n++;
				pos+=substring.length;
			}
			else{
				break;
			}
		}
		return(n);
	}
</script>
<textarea id="textul" cols="50" rows="10" onKeyUp="contor();"></textarea>
<div id="contor"></div>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

1 comentariu

  1. pety spune:

    Am scris de 9x caracterul a, dar nu mi-a contorizat decat 8 aparitii. Atunci am realizat ca nu face diferenta intra „A” si „a”.
    De altfel codul doar „a” contorizeaza: raspuns+=”Aţi scris de „+aparitii(textul,”a”)+” ori litera ‘a’.”;


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *