Dynamiczny licznik znaków zawartych w textarea

2010-12-29 14:28:49 Post #1 korey

 
Witam. chciałem się pochwalić swoim skromnym kodem.
Zadanie skryptu:
Zadaniem skryptu jest naliczanie ilości znaków zawartych w polu textarea.
zastosowania
Jednym i chyba głównym z zastosowań skryptu jest pokazywanie użytkownikowi ile wpisał znaków np w wiadomości czy artykule na ile możliwych do wpisania. np: 1231/500.

[size=20]Kody:[/size]

- JS: 
<SCRIPT language="JavaScript">
function LiczZnaki(field,cnt,maxchar) { // począek funkcji
var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) : ""; // pobieramy znacznik maxlength z textarea
if (field.getAttribute && field.value.length > mlength){
field.value = field.value.substring(0, mlength);
}

if (field.value.length <= maxchar) { //jesli długość ciagu jest mniejsza badz rowna maxchar 
field.value = field.value.substring(0, maxchar);
cnt.innerHTML = (0 +field.value.length); // wyswietlamy cyferke informującą o liości znaków.
}
else{
cnt.innerHTML = ("Error"); // jesli jakimś cudem w polu bedzie wiećęj znaków od maxchar pokazujemy Error
}
}
</script>
- HTML: 
<html>
<head>
</head>
<body>
<form name="Form1">
Tutaj maxsimum 3000 znaków.<br>
<textarea name="txt1" cols="50" rows="3" maxlength="3000" onkeyup="LiczZnaki(this,cnt1,3000);" onmouseup="LiczZnaki(this,cnt1,3000);" ></textarea>
<span id="cnt1">0</span>/3000<br><br>

Tutaj maxsimum 2500 znaków.<br>
<textarea name="txt2" cols="50" rows="6" maxlength="2500" onkeyup="LiczZnaki(this,cnt2,2500);" onmouseup="LiczZnaki(this,cnt2,2500);" ></textarea>
<span id="cnt2">0</span>/2500<br><br>
</form>
</body>
</html>
Mam nadzieje że komuś sie coś takiego przyda.. i podkreślam że moja wiedza z JS = mało

Pozdrawiam Korey

2010-12-29 14:48:46 Post #2 Comandeer

 
Dobra, przejrzałem i oto wyniki:
JS: 
<script type="text/javascript">
	function LiczZnaki(field,cnt,maxchar) 
	{ // poczÄ?ek funkcji 
		cnt=document.getElementById(cnt);
		var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) : maxchar; // pobieramy znacznik maxlength z textarea 
		if (field.getAttribute && field.value.length > mlength)
		{ 
			field.value = field.value.substring(0, mlength); 
		} 

		if (field.value.length <= maxchar) 
		{ //jesli dA?ugoA?Ä? ciagu jest mniejsza badz rowna maxchar  
			cnt.innerHTML = (0 +field.value.length)+'/'+maxchar; // wyswietlamy cyferke informujÄ?cÄ? o lioA?ci znakA3w. 
		} 
		else
		{ 
			field.value = field.value.substring(0, maxchar); 
			cnt.style.color ='#f00'; // jesli jakimA? cudem w polu bedzie wieÄ?Ä?j znakA3w od maxchar pokazujemy Error 
		} 
	} 
</script>

HTML: 
<textarea name="txt1" cols="50" rows="3" maxlength="3000" onkeyup="LiczZnaki(this,'cnt1',3000);"  onchange="LiczZnaki(this,'cnt1',3000);"></textarea><span id="cnt1"></span>

1) Zauważ, że cnt jest ujęte w apostrofie - korzystałeś z niestardowego document.all, po zmianie korzysta z getElementById (pierwsza linijka w JS)
2) Trochę zmieniłem działanie licznika - wydaje mi się bardziej user friendly
3) onmouseup przeszło na onchange - bardziej uniwersalne

2010-12-29 18:58:58 Post #3 korey

 
znalazłem problem przy duzej ilości znaków po wpisaniu jakiegos znaku scrool ustawia sie zawsze na sama góre..

2010-12-29 21:00:05 Post #4 Comandeer

 
Nie za bardzo wiem o co ci chodzi. W sensie jak za dużo wpiszesz, to scroll w textarea jest na samej górze, czyli część tekstu jest niewidoczna, tak? Nie wiem za bardzo jakby to rozwiązać - prawdopodobnie focus starczy.

2010-12-29 23:50:01 Post #5 korey

 
A może nospor coś na to poradzi..?

2010-12-30 12:31:54 Post #6 nospor

 
Masz jakiegos linka do tego przykladu? Jakoś za bardzo nie wyobrażam sobie błędu o którym piszesz.

2010-12-30 16:10:54 Post #7 korey

 
owszem:
u mnie na stronie:
login: test123
hasło: 123456
url strony: http://get-movie.pl/
url z formularzem: http://get-movie.pl/admin/index.php?action=create_art
wprowadziłem drobne ulepszenia, ale i tak mam tego "buga" 
<script language="javascript">
function LiczZnaki(field,cnt,maxchar) { // począek funkcji

var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) : ""; // pobieramy znacznik maxlength z textarea
var obj = field.value.length; //obj = 3000
var jednaCzwarta = maxchar / 4; //750
var jednaTrzecia = maxchar / 3; //1000
var jednaDruga = maxchar / 2; //1500
var koniec = maxchar / 1.2; // 2500

if (field.getAttribute && field.value.length > mlength){
	field.value = field.value.substring(0, mlength);
}

if (field.value.length <= maxchar) { //jesli długość ciagu jest mniejsza badz rowna maxchar 
	field.value = field.value.substring(0, maxchar);
	// var wynik = cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków.
	cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków.
}
else{
	// var wynik = cnt.innerHTML = ("Error"); // jesli jakimś cudem w polu bedzie wiećęj znaków od maxchar pokazujemy Error
	cnt.innerHTML = ("Error"); // jesli jakimś cudem w polu bedzie wiećęj znaków od maxchar pokazujemy Error
}




if(obj <= jednaCzwarta ){
	cnt.style.color = '#128409';
}
else if(obj > jednaCzwarta && obj <= jednaTrzecia ) {
	cnt.style.color = '#778409';
}
else if(obj > jednaTrzecia && obj <= jednaDruga){
	cnt.style.color = '#f5a749';
}
else if(obj > jednaDruga && obj <= koniec){
	cnt.style.color = '#ca5217';
}
else if(obj >= koniec){
	cnt.style.color = '#c51d1d';
}

return true;
//return wynik;
}
</script>
<font color="#B20000">*</font> Krótka Tresc:
<textarea id="tresc" name="tresc" class="write" maxlength="3000" onkeyup="LiczZnaki(this,licztresc,3000);" style="width: 370px; height:140px; margin: 0px; border-top: 2px dotted #4F684C;"></textarea>
 <span id="licztresc"></span>

2011-01-03 13:08:45 Post #8 nospor

 
To przez to:
if (field.value.length <= maxchar) { //jesli długość ciagu jest mniejsza badz rowna maxchar
field.value = field.value.substring(0, maxchar);
// var wynik = cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków.
cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków.
}
Poco ucinasz wartosc textarea skoro sie miesci w zadanym wymierze? Przez to przypisanie na nowo do textarea scroll ci się przesuwa

2011-01-03 14:51:28 Post #9 korey

 
Lubie jak zmuszasz korey-a do myślenia
Poprawiłem wszystko i ostatecznie Gotowy i sprawny kod wygląda tak:

- JS: 
function LiczZnaki(field,cnt,maxchar) { // począek funkcji

var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) : ""; // pobieramy znacznik maxlength z textarea
var obj = field.value.length; //obj = 3000
var jednaCzwarta = maxchar / 4; //750
var jednaTrzecia = maxchar / 3; //1000
var jednaDruga = maxchar / 2; //1500
var koniec = maxchar / 1.2; // 2500

if (field.getAttribute && obj > mlength){
	field.value = field.value.substring(0, mlength);
}

if (field.value.length <= maxchar) { //jesli długość ciagu jest mniejsza badz rowna maxchar 
	cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków.
}
else{
	cnt.innerHTML = ("Error"); // jesli jakimś cudem w polu bedzie wiećęj znaków od maxchar pokazujemy Error
}

if(obj <= jednaCzwarta ){cnt.style.color = '#128409';}
else if(obj > jednaCzwarta && obj <= jednaTrzecia ) {cnt.style.color = '#778409';}
else if(obj > jednaTrzecia && obj <= jednaDruga){cnt.style.color = '#f5a749';}
else if(obj > jednaDruga && obj <= koniec){cnt.style.color = '#ca5217';}
else if(obj >= koniec){cnt.style.color = '#c51d1d';}

return true;
} // koniec LiczZnaki();
- HTML: 
<html>
<head>
</head>
<body>
<form name="Form1">
Tutaj maxsimum 3000 znaków.<br>
<textarea name="txt1" cols="50" rows="3" maxlength="3000" onkeyup="LiczZnaki(this,cnt1,3000);" onmouseup="LiczZnaki(this,cnt1,3000);" ></textarea>
<span id="cnt1">0</span>/3000<br><br>

Tutaj maxsimum 2500 znaków.<br>
<textarea name="txt2" cols="50" rows="6" maxlength="2500" onkeyup="LiczZnaki(this,cnt2,2500);" onmouseup="LiczZnaki(this,cnt2,2500);" ></textarea>
<span id="cnt2">0</span>/2500<br><br>
</form>
</body>
</html>
Jeśli komuś się przyda (a mam nadzieje ze tak będzie) możecie uszczęśliwić korey-a Pisząc skromne dzięki

Pozdro

2011-01-06 20:29:41 Post #10 Comandeer

 
Muszę cię zmartwić, korey, ale skrypt się wyglebia w firefoxie w trybie zgodności ze standardami (czyli przy <!DOCTYPE>. Czemu nie zastosowałeś się do mojej rady z getElementByID? Problem zniknąłby od razu. Nie zauważyłem także, aby mouseup działało przy wklejaniu myszką. Idąc dalej, wciąż obserwuję problem ze scrollem.
Ale i tak dzięki - po kilku przeróbkach skrypt działa wyśmienicie.

2011-01-06 23:45:09 Post #11 korey

 
no co ty u mnie w firefoxie działa jak trzeba, testowałem tez na operze chrome i safari i wszystko było tak jak ja sobie to wyobrażałem ;p

2011-01-07 21:12:38 Post #12 Comandeer

 
<!DOCTYPE html>
	<meta charset="UTF-8">
	<script>function LiczZnaki(field,cnt,maxchar) { // począek funkcji 

var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) : ""; // pobieramy znacznik maxlength z textarea 
var obj = field.value.length; //obj = 3000 
var jednaCzwarta = maxchar / 4; //750 
var jednaTrzecia = maxchar / 3; //1000 
var jednaDruga = maxchar / 2; //1500 
var koniec = maxchar / 1.2; // 2500 

if (field.getAttribute && obj > mlength){ 
    field.value = field.value.substring(0, mlength); 
} 

if (field.value.length <= maxchar) { //jesli długość ciagu jest mniejsza badz rowna maxchar  
    cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków. 
} 
else{ 
    cnt.innerHTML = ("Error"); // jesli jakimś cudem w polu bedzie wiećęj znaków od maxchar pokazujemy Error 
} 

if(obj <= jednaCzwarta ){cnt.style.color = '#128409';} 
else if(obj > jednaCzwarta && obj <= jednaTrzecia ) {cnt.style.color = '#778409';} 
else if(obj > jednaTrzecia && obj <= jednaDruga){cnt.style.color = '#f5a749';} 
else if(obj > jednaDruga && obj <= koniec){cnt.style.color = '#ca5217';} 
else if(obj >= koniec){cnt.style.color = '#c51d1d';} 

return true; 
} // koniec LiczZnaki();
</script>
<textarea name="txt1" cols="50" rows="3" maxlength="3000" onkeyup="LiczZnaki(this,cnt1,3000);" onmouseup="LiczZnaki(this,cnt1,3000);" ></textarea> 
<span id="cnt1">0</span>

Sprawdź w fx - nie działa.

2011-01-08 16:17:37 Post #13 korey

 
Słuchaj patrzę i mi działa jak trzeba.. zarówno mój kod jak i ten twój..
Po wpisywaniu znaków liczba dynamicznie się zmienia.. używam CTRL+V i tak że od razu zmienia się liczba znaków. Jedynie nie działa jak robię PPM+wklej, ale podkreślam że najbardziej to zależało mi na tym by scrool nie latał góra-duł przy wpisywaniu tekstu i na tym by zmieniała się liczba informująca o ilości znaków przy wklejaniu metodą CTRL+V
załączam mały ss na którym widać że znaczki są oraz żę działa na FX

http://img716.imageshack.us/img716/6851/xxxsvx.jpg
pozdrawiam

PS: Nospor czemu nie działa tag IMG

2011-01-08 17:47:51 Post #14 Comandeer

 
Jak działa jak nie działa?
http://img10.imageshack.us/img10/3524/zrzutekranuku.png
Masz zaznaczone w firebugu ilość błędów - odpowiada liczbie znaków wpisanych do textarea.
I wiem czemu u ciebie na stronie działa: przed <!DOCTYPE> masz wstawiony ten skrypt. Przerzuć go do head. Tak samo <html> powinien być po <!DOCTYPE>. Jak to zrobisz, skrypt przestanie działać bez moich poprawek

2011-01-10 16:13:41 Post #15 korey

 
no ale przed DOCTYPE to ja mam inny skrypt

2011-03-17 17:10:13 Post #16 guest_Fastlone

 
Ja potrzebuję waszej pomocy.
Skopiowany mam kod Korey'a
Kod wygląda tak: 
<script type="text/javascript">
function LiczZnaki(field,cnt,maxchar) { // począek funkcji

var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) : ""; // pobieramy znacznik maxlength z textarea
var obj = field.value.length; //obj = 1000
var jednaCzwarta = maxchar / 4; //750
var jednaTrzecia = maxchar / 3; //1000
var jednaDruga = maxchar / 2; //1500
var koniec = maxchar / 1.2; // 2500

if (field.getAttribute && obj > mlength){
    field.value = field.value.substring(0, mlength);
}

if (field.value.length <= maxchar) { //jesli długość ciagu jest mniejsza badz rowna maxchar 
    cnt.innerHTML = ( 0 + field.value.length + '/' + maxchar ); // wyswietlamy cyferke informującą o liości znaków.
}
else{
    cnt.innerHTML = ("Error"); // jesli jakimś cudem w polu bedzie wiećęj znaków od maxchar pokazujemy Error
}

if(obj <= jednaCzwarta ){cnt.style.color = '#128409';}
else if(obj > jednaCzwarta && obj <= jednaTrzecia ) {cnt.style.color = '#778409';}
else if(obj > jednaTrzecia && obj <= jednaDruga){cnt.style.color = '#f5a749';}
else if(obj > jednaDruga && obj <= koniec){cnt.style.color = '#ca5217';}
else if(obj >= koniec){cnt.style.color = '#c51d1d';}

return true;
} // koniec LiczZnaki();
</script>

Tak wygląda to przy textarea 
<b>Pytanie 1: ...</b> (Minimalna długość: 100 znaków)<span id="cnt1">0</span>/1000</td></tr>
<tr><td><i><textarea class="pytania_textarea" id="pytanie1" name="pytanie1" onkeyup="LiczZnaki(this,cnt1,1000);" onmouseup="LiczZnaki(this,cnt1,1000);" cols="70%" rows="6%"></textarea></i></td></tr>

Po porównaniu z kodem wydaje się wszystko ok, lecz nie działa. Proszę o pomoc.

Pozdrawiam
Fastlone

2011-03-18 11:11:16 Post #17 nospor

 
Nie określiłeś maxlength dla textarea.
W kodzie korey'a masz:
maxlength="2500"

2011-03-18 15:30:05 Post #18 guest_Fastlone

 
Poprawka:
Kod działa na IE (8) oraz Google Chrome. Nie działa na Firefoxie 3 ani Firefoxie 4.

2011-03-18 15:36:56 Post #19 nospor

 
1) No ale poprawiłeś rzecz, o której wspomniałem?
2) Skoro nie działa ci na FireFox to zainstaluj sobie FireBug i zobacz w konsoli błędów czy nie pluje jakimś błędem.
Jeśli jednak nie pluje błędem to zdebuguj go w firebug i zobacz co się dzieje w każdej linii

2011-03-19 14:17:43 Post #20 guest_Fastlone

 
Tak, dodałem znacznik maxlength do każdego textarea.
FireBug u mnie nie działa ani z FF 4.0, ani z 3.6, użyłem jakiegoś sprawdzacza online (JSLint.com) 
Problem at line 3 character 36: Missing radix parameter.

var mlength = field.getAttribute ? parseInt(field.getAttribute("maxlength")) ...

Może ktoś powiedzieć, co tutaj się nie zgadza? Kompletnie nie ogarniam javascripta

Answer

1 2 >

Recently commented

  1. ShoutBox Podświadomość
  2. ShoutBox Trilux
  3. ShoutBox morelowy-dolomit
  4. ShoutBox Lucidoremi
  5. ShoutBox Goran Lezczek
  6. ShoutBox Ktos
  7. Opcje dwuwartościowe... gosc

Latest on forum

  1. Wykładziny dywanowe Wykładziny dywanowe
  2. Aparat ortodontyczny... Aparat ortodontyczny ceny
  3. Bonding zębów w Gdań... Bonding zębów w Gdańsku
  4. Podnośniki Podnośniki
  5. Podnośniki towarowe Podnośniki towarowe
  6. Podest roboczy Podest roboczy
  7. Naświetlacz LED 30W Naświetlacz LED 30W

Users' scripts

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer

Categories

  1. wszystkie wszystkie komentarze all (1)

Blogroll

  1. Pyton
  2. eRIZ's weblog
  3. papalka
  4. Vokiel