Linux за българи: Форуми

Програмиране => Web development => Темата е започната от: NikolaiTalev в Jan 11, 2011, 10:25


Титла: Проблем с JavaScript код
Публикувано от: NikolaiTalev в Jan 11, 2011, 10:25
Здравейте снощи цяла вечер си блъсках главата с тоя код и не мога да разбера защо не се получава  ???

Код
GeSHi (Javascript):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=udF-8">
  3. <title>...</title>
  4. <style type="text/css">
  5.  
  6. </style>
  7.  
  8. <script language="javascript" type="text/javascript">
  9.  
  10. function limitText(key, limitField, limitCount, limitNum) 
  11. {
  12. if (key == 32 || key == 13){
  13. alert("You just pressed a key");}//tuka trqbva da restartira funciqta
  14. else{
  15. 	if (limitField.value.length > limitNum) {
  16. 		limitField.value = limitField.value.substring(0, limitNum);
  17. 	} else {
  18. 		limitCount.value = limitNum - limitField.value.length;
  19. 	}
  20. }
  21. }
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. <form name="myform">
  27. <textarea name="limitedtextarea" onKeyPress="limitText(window.event.keyCode);" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,10);" 
  28. onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,10);">
  29. </textarea><br>
  30. <font size="1">(Maximum characters: 10)<br>
  31. You have <input readonly type="text" name="countdown" size="3" value="10"> characters left.</font>
  32. </form>
  33. </body>
  34. </html>  

Така засича space end enter
Проблема е че ако key най- отпред (function limitText(key, limitField, limitCount, limitNum) ) изважда аррлета т.е засича  space-a, но тогава не работи останалата част (проверката за дължината)

П.П
Цитат
Идеята е следната искам да огранича дължината на въведената дума, тоест
докато се въвежда текста примерно съм задал 40 символа  в момента който се натисне space || enter да започва от начало (тоест да брои символите на всяка дума)

Edit:alert("You just pressed a key"); алерта съм го сложил само с цел визуализация за натискането на клавиш enter || space иначе там трябва да рестартира функцията  limitText

Титла: Re: Проблем с JavaScript код
Публикувано от: neter в Jan 11, 2011, 12:12
Зарежи го чистия javascript - само ще си навлечеш главоболия. Пример, "window.event" го няма във Firefox (и много други браузъри). Трябва да изписваш алтернативи според браузъра, което е куцо. Препоръчвам ти да почнеш да четеш за jQuery (ако мислиш да се занимаваш с javascript и в бъдеще).
По твоя проблем. Ето пример как може да стане с jQuery
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=udF-8">
  3. <title>...</title>
  4. <script src="път/до/jquery.js"></script>
  5. <script src="път/до/textlimit.js"></script>
  6. <style type="text/css">
  8. </head>
  10. <form name="myform">
  11. <textarea id="limitedtextarea" name="limitedtextarea"></textarea><br>
  12. <font size="1">(Maximum characters: 10)<br>
  13. You have <span class="countdown"></span> characters left.</font>
  14. </form>
  15. <script type="text/javascript">
  16. $("#limitedtextarea").textlimit("span.countdown",10,-1);
  18. </body>
  19. </html>
Това ($2) е сайтът на jQuery, откъдето можеш да си дръпнеш библиотеката на jQuery, която вмъкваме в head-a. Това ($2) е страничката, откъдето можеш да си дръпнеш плъгина Text Limit за jQuery, който също можеш да забележиш вмъкнат в head-a. Javascript-ът в дъното на кода говори сам за себе си в jQuery синтаксис. Само ще ти кажа, че "-1" указва потребителят да не вижда изпълнението на ограничението, когато в полето е поставен текст, по-дълъг от ограничението. Ако искаш изрязването на текста да се вижда, замени "-1" със скоростта на изрязване в милисекунди (например 100).
При така вече направен добър ограничител на текста, обясни по-добре какво трябва да се случва при натискане на интервал или Enter, за какво са тези alert-и и т.н.

Титла: Re: Проблем с JavaScript код
Публикувано от: bvbfan в Jan 11, 2011, 12:34
Цитат
onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,10);
function limitText(key, limitField, limitCount, limitNum)
Викаш функция, която приема 4 параметъра, а я викаш с 3, което обърква цялата логика и скрипта не се изпълнява, заради недефинирани символи.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=udF-8">
<title>...</title>
<style type="text/css">
 
</style>
 
<script language="javascript" type="text/javascript">
 
function limitText(key, limitCount, limitNum) 
{
  if (key.value.length >= limitNum) {
    key.value = key.value.substring(0, limitNum);
  }
  limitCount.value = limitNum - key.value.length;
}
</script>
 
</head>
<body>
<form name="myform">
<textarea name="limitedtextarea" onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,10);"
onKeyPress="limitText(this.form.limitedtextarea,this.form.countdown,10);">
</textarea><br>
<font size="1">(Maximum characters: 10)<br>
You have <input readonly type="text" name="countdown" size="3" value="10"> characters left.</font>
</form>
</body>
</html>   

Разгледай този код, не съм javascript програмист, може да написано невярно, но в Лисицата работи.

Титла: Re: Проблем с JavaScript код
Публикувано от: NikolaiTalev в Jan 11, 2011, 13:53
Цитат на: neter в Jan 11, 2011, 12:12
Зарежи го чистия javascript - само ще си навлечеш главоболия. Пример, "window.event" го няма във Firefox (и много други браузъри). Трябва да изписваш алтернативи според браузъра, което е куцо. Препоръчвам ти да почнеш да четеш за jQuery (ако мислиш да се занимаваш с javascript и в бъдеще).
По твоя проблем. Ето пример как може да стане с jQuery
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=udF-8">
  3. <title>...</title>
  4. <script src="път/до/jquery.js"></script>
  5. <script src="път/до/textlimit.js"></script>
  6. <style type="text/css">
  8. </head>
  10. <form name="myform">
  11. <textarea id="limitedtextarea" name="limitedtextarea"></textarea><br>
  12. <font size="1">(Maximum characters: 10)<br>
  13. You have <span class="countdown"></span> characters left.</font>
  14. </form>
  15. <script type="text/javascript">
  16. $("#limitedtextarea").textlimit("span.countdown",10,-1);
  18. </body>
  19. </html>
Това ($2) е сайтът на jQuery, откъдето можеш да си дръпнеш библиотеката на jQuery, която вмъкваме в head-a. Това ($2) е страничката, откъдето можеш да си дръпнеш плъгина Text Limit за jQuery, който също можеш да забележиш вмъкнат в head-a. Javascript-ът в дъното на кода говори сам за себе си в jQuery синтаксис. Само ще ти кажа, че "-1" указва потребителят да не вижда изпълнението на ограничението, когато в полето е поставен текст, по-дълъг от ограничението. Ако искаш изрязването на текста да се вижда, замени "-1" със скоростта на изрязване в милисекунди (например 100).
При така вече направен добър ограничител на текста, обясни по-добре какво трябва да се случва при натискане на интервал или Enter, за какво са тези alert-и и т.н.

@neter благодаря ти много , искам докато потребителя въвежда текста при всяко натискане на space or enter да започва да брои от начало (тоест искам да определя максималната дължина на една дума )

Титла: Re: Проблем с JavaScript код
Публикувано от: bvbfan в Jan 11, 2011, 15:10
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=udF-8">
  3. <title>...</title>
  4. <style type="text/css">
  5.  
  7.  
  8. <script language="javascript" type="text/javascript">
  9.  
  10. function limitText(e, key, limitCount, limitNum) 
  11. {
  12.   if( e.which == 32 || e.which == 13 )
  13.   {
  14.     key.value = "";
  15.   }
  16.   else
  17.   if (key.value.length >= limitNum) {
  18.     key.value = key.value.substring(0, limitNum);
  19.   }
  20.   limitCount.value = limitNum - key.value.length;
  21. }
  23.  
  24. </head>
  26. <form name="myform">
  27. <textarea name="limitedtextarea" onKeyPress="limitText(event,this.form.limitedtextarea,this.form.countdown,10);"
  28. onKeyUp="limitText(event,this.form.limitedtextarea,this.form.countdown,10);">
  30. <font size="1">(Maximum characters: 10)<br>
  31. You have <input readonly type="text" name="countdown" size="3" value="10"> characters left.</font>
  32. </form>
  33. </body>
  34. </html> 
  35.  

Титла: Re: Проблем с JavaScript код
Публикувано от: NikolaiTalev в Jan 11, 2011, 15:58
Код
GeSHi (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=udF-8">
  3. <title>...</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script type="text/javascript" src="textlimit.js"></script>
  6. <style type="text/css">
  8. </head>
  9. <body onKeyPress="doKey(window.event.keyCode);">
  10. <form name="myform">
  11. <textarea id="limitedtextarea" name="limitedtextarea" ></textarea><br>
  12. <font size="1">(Maximum characters: 100)<br>
  13. You have <span class="countdown"></span> characters left.</font>
  14. </form>
  15. <script type="text/javascript">
  16. function doKey(key) 
  17. { 
  18. if (key == 32 || key == 13){
  19. $("#limitedtextarea").textlimit("span.countdown",50,-1);}//тук трябва да рестартирам брояча
  20. else {$("#limitedtextarea").textlimit("span.countdown",50,-1);}
  21. }
  23. </body>
  24. </html>

@neter как мога да рестартирам брояча тоест пиша .... и като натисна ентер или спейс да почва пак от 50символа

Титла: Re: Проблем с JavaScript код
Публикувано от: neter в Jan 11, 2011, 17:01
Извинявай за забавянето, трябва и да се работи :) За целите на твоето упражнение може да окастрим и променим кода на плъгина Text Limit на jQuery така:
Код
GeSHi (Javascript):
  1. jQuery.fn.textlimit=function(counter_el, thelimit) {
  2. 	var that = this[0];
  3. 	updateCounter();
  4.  
  5. 	function updateCounter(){
  6.                 words = that.value.split(/[\s]+/);
  7.                 var wordCharCount = words[words.length-1].length;
  8. 		jQuery(counter_el).text(thelimit - wordCharCount);
  9. 	};
  10.  
  11. 	this.keyup (function(e){
  12. 		updateCounter();
  13.                 for (i=0;i<words.length;i++) {
  14. 		        if( words[i].length > thelimit ){
  15. 			        this.value = this.value.replace(words[i], words[i].substr(0,thelimit));
  16. 		        }
  17.                 }
  18.                 updateCounter();
  19. 	});
  20. };
HTML-ът си остава такъв, какъвто ти го показах в по-горния ми пост, като само махни третия параметър от функцията textlimit ;)

P.S.: Броячът под textarea-та ще показва оставащите символи за последната дума в текста. Надявам се да ти върши работа така, тъй като за момента не ми хрумва как ще стане логиката да показваме броя на текущо редактираната дума от текста (може да не е последната). Но пък току виж ми хрумнало :)

Титла: Re: Проблем с JavaScript код
Публикувано от: NikolaiTalev в Jan 11, 2011, 17:13
Мерси много получаваш цяла каса виртуална бира  [_]3 
Не съм спал снощи да го мисля ама явно ще трябва да попрочета някое  букварче за jQuery. Аз попринцип на php пиша и до сега не ми се е налагало да си пиша js за каквото ми е трябвало сам намирал готов. Сега ми остана само с php  да направя проверката ако е изключен js да не записва в база даните (за да не заобиколи някой проверката )




Powered by SMF 2.0 Beta 4 | SMF © 2006, Simple Machines LLC