Ez már egy viszonylag régen írt script, csak a napokban rájöttem, hogy ide még nem töltöttem fel. Mire is jó? Természetesen szerveroldali ellenőrzés mellett, plusz kényelmi funkcióként beépíthető ilyen számláló szöveges beviteli mezőkhöz űrlapoknál. Így a felhasználó gépelés közben is tudja, hány karaktert írhat még. Iwiw-en is ilyent lehet látni a privát üzenet küldésnél például.
A függvény ennyi lenne:
{
var msginput = document.getElementById(msginputId);
var ccounter_input = document.getElementById(ccounter_inputId);
var msglen = msginput.value.length;
ccounter_input.value = (msglen > 0) ? max - msglen : max;
if(msglen > max) {
alert("Üzenet max hossza: "+max);
msginput.value = msginput.value.substring(0,max);
ccounter_input.value=0;
}
if (addevent)
{
msginput.onkeyup = function() { ccounter_func(msginputId,ccounter_inputId,max); }
}
}
Használata:
1. paramétere a függvény az üzenet mező (textarea) id-je.
2. paramétere annak az input mezőnek az id-je, amibe a számláló kerül. ( átírható span-re vagy div-re is. Csak akkor a ccounter_input-nak nem a value tulajdonságát, hanem az innerHTML -t kellene használni. )
3. paraméter pedig a maximális karakterszám, ami az üzenet mezőbe kerülhet.
A 4. paraméterről később. Nem kötelező megadni.
A függvény az onkeyup eseményben kell meghívni. Tehát akkor egy példa.
Üzenet:<br />
<textarea id="msginput4" cols="60" rows="6" onkeyup="ccounter_func(this.id, this.id+'counter' , 40)"></textarea><br />
<input type="text" id="msginput4counter" readonly="readonly" size="5" value="40" />
</form>
Ezzel max 40 karakter kerülhetne a szövegmezőbe. Persze kijátszható, ha nem nyomunk le billentyűt, csak jobb egérgombbal kiválasztjuk a beillesztés opciót. Ha ez nagyon fontos, le lehet futtatni időközönként setInterval-tal a függvényt, vagy vannak nem teljesen böngészőfüggetlen megoldások a másolás+beillesztés észlelésére. De szerveroldalon úgyis ellenőrizni kell mindent. És legkésőbb akkor kiderül. Ez csak egy kis könnyítés. Érdekesség.
Több input esetén
Akárhány input megadható. De kényelmesebb lehet külön fájlban megadni az id-ket és a max karakterszámot. Legyen tehát a ccounter.js a következő.
inputok egy asszociativ tömb. használata, benne minden elem vesszővel elválasztva
először a számlálandó textarea id-je, majd kettőspont, aztán szögletes zárójelben
idézőjelben a számokat megjelenítő input id-je, és vessző után a max karakterszám
*/
var inputok = {
msginput: ['ccounter', 100],
msginput2: ['ccounter2', 200],
msginput3: ['ccounter3', 300]
}
/** itt már ne módosítsd **/
function ccounter_func(msginputId,ccounter_inputId,max,addevent)
{
var msginput = document.getElementById(msginputId);
var ccounter_input = document.getElementById(ccounter_inputId);
var msglen = msginput.value.length;
ccounter_input.value = (msglen > 0) ? max - msglen : max;
if(msglen > max) {
alert("Üzenet max hossza: "+max);
msginput.value = msginput.value.substring(0,max);
ccounter_input.value=0;
}
if (addevent)
{
msginput.onkeyup = function() { ccounter_func(msginputId,ccounter_inputId,max); }
}
}
var eid="";
for (eid in inputok) {
ccounter_func(eid,inputok[eid][0],inputok[eid][1],true);
}
Itt jön képbe a 4. paraméter. Ami azért felel, hogy ne legyen feleslegesen minden híváskor hozzárendelve a függvény az onkeyup-hoz. Ebből ami fontos, a következő pár sor a script elején
msginput: ['ccounter', 100],
msginput2: ['ccounter2', 200],
msginput3: ['ccounter3', 300]
}
Kommentben is is benne van a kód felett a használata, de azért leírom. A kapcsos zárójelek között név-érték párokat kell felsorolni. A párokat vessző, a nevet és értéket pedig kettőspont választja el. A név az üzenetmező id-je. Az érték pedig egy újabb tömb. ( A szögletes zárójelben ) Ebben először idézőjelben annak az inputnak az id-jét kell megadni, amelyikben a visszaszámlálás lesz. A vessző után pedig hogy mennyiről induljon a visszazsámlálás. Azaz maximum milyen hosszú lehet az üzenetmező tartalma. És most jöjjön az index.html
<head>
<title>Karakterszámláló</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="" method="post">
Üzenet:<br />
<textarea id="msginput" cols="60" rows="6"></textarea><br />
<input type="text" id="ccounter" readonly="readonly" size="5" />
</form>
<form action="" method="post">
Üzenet:<br />
<textarea id="msginput2" cols="60" rows="6"></textarea><br />
<input type="text" id="ccounter2" readonly="readonly" size="5" />
</form>
<form action="" method="post">
Üzenet:<br />
<textarea id="msginput3" cols="60" rows="6"></textarea><br />
<input type="text" id="ccounter3" readonly="readonly" size="5" />
</form>
<form action="" method="post">
Üzenet:<br />
<textarea id="msginput4" cols="60" rows="6" onkeyup="ccounter_func(this.id, this.id+'counter' , 40)"></textarea><br />
<input type="text" id="msginput4counter" readonly="readonly" size="5" value="40" />
</form>
<script type="text/javascript" src="ccounter.js" ></script>
</body>
</html>
Itt az első 3 input a ccounter.js -ben van megadva. Ami az inputok után van betöltve. És a 4. input pedig az első példa szerint közvetlenül van felparaméterezve.
Teljes demo bejegyzésbe nem illeszthető. Az első 3 input ellenőrzése viszont itt is megtekinthető:
