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. Mysql - FAQ Paweł
  2. Pager 2.5.1 oraz EPa... Na szybko2
  3. Pager 2.5.1 oraz EPa... Sławek
  4. Mysql - FAQ Piotr
  5. Liczba dni roboczych Na szybko2
  6. Liczba dni roboczych Naszybko
  7. Klasa widoku nospor

Categories

  1. wszystkie wszystkie komentarze all (1)