ugrás a tartalomhoz

billentyű leütés

cica · 2013. Feb. 24. (V), 10.57
Üdv!

Készítek egy egyszerű progit mégis gondom van vele.
Az a feladata, hogy kiírja melyik billentyűt nyomd le és azt kell tenni.
A probléma a text mező, szerintem nem felhasználóbarát. A Tab billentyűnél is elállítódik a fókusz. Többször bele kell kattintani a text mezőbe. A másik problémám az Enter leütésekor kezdi előröl. Miért? Lehetne text mező nélkül ezt?
A progit mellékelem.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title></title>  
  6. <script>  
  7. osz=0;rosszvalasz=0;  
  8. var tomb = new Array(         
  9. new Array("Nyomd le a Backspace-t!", 8),      
  10. new Array("Nyomd le a Tab-ot!", 9 ),      
  11. //new Array("Nyomd le az Enter-t!", 13),  
  12. new Array("Nyomd le a Shift-et!", 16 ),   
  13. new Array("Nyomd le a Ctrl-t!", 17),      
  14. new Array("Nyomd le az Alt-ot!", 18),     
  15. new Array("Nyomd le a Caps lock-ot!", 20),    
  16. new Array("Nyomd le az Escape-t!", 27),   
  17. new Array("Nyomd le a Page up-ot!", 33),      
  18. new Array("Nyomd le a Page down-t!", 34),     
  19. new Array("Nyomd le az End-et!", 35),     
  20. new Array("Nyomd le a Home-t!", 36),          
  21. new Array("Nyomd le a Bal nyilat!", 37),      
  22. new Array("Nyomd le a Fel nyilat!", 38),      
  23. new Array("Nyomd le a Jobbra nyilat!", 39),   
  24. new Array("Nyomd le az Le!", 40)  
  25. )     
  26. onload = function(){  
  27.  field = document.getElementById('number_field')  
  28.  field.onkeydown = keyhit  
  29.  field.focus()  
  30. }  
  31. function keyhit(e)  
  32. {  
  33.  if (e!=13){  
  34.  thisKey = e ? e.which : window.event.keyCode  
  35.  ell(thisKey) }  
  36.  }  
  37. function ell(press)  
  38. {  
  39.     max=tomb.length;   
  40.     var ertekeles = 'helytelen';   
  41.     var kerdes = document.getElementById("bill").innerHTML;  
  42.     for ( i=0; i < tomb.length ; i++) {            
  43.         if ((kerdes == tomb[i][0]) && (press == tomb[i][1])) { ertekeles = 'helyes';}   }     
  44.     if (ertekeles == 'helyes')  
  45.       { osz+=10;  
  46.       a++;   
  47.       document.getElementById("bill").innerHTML=tomb[a][0];  
  48.     }else {alert('Hibás válasz!'+press); rosszvalasz++;}  
  49.     if (a==max) {document.getElementById("bill").innerHTML="Vége"+a+' '+max ;}  
  50. }  
  51. </script>  
  52. </head>  
  53. <body bgcolor=ivory onbeforecopy="return false" oncontextmenu="return false" oncopy="return false" ondragstart="return false" onselect="return false" onselectstart="return false">  
  54. <center>  
  55. <h1><div id="bill" style="text-align:center; border:0px solid; padding:5px; width:100%; margin-left:auto; margin-right:auto;" ></h1>  
  56. <script>  
  57. a=0;  
  58. document.getElementById("bill").innerHTML=tomb[a][0];  
  59. </script>  
  60. <form action="" method="post">  
  61. <p><input type="text" id="number_field" name="number_field" value="HA NEM MEGY KATT IDE" size='30' maxlength='10'></p>  
  62. </form>  
  63. </center>  
  64. </body>  
  65. </html>  
‹ Fix képméret? Chrome mező besárgulás kikapcsolása autocomplete tiltás nélkül ›
 ■
2

Alapok

Hidvégi Gábor · 2013. Feb. 24. (V), 11.30
A probléma a text mező
Nem, sajnos a probléma a hiányos tudásod. Ez persze nem gond, végső soron az, amit keresel, a javascript eseménykezelés, de azt javaslom, előbb tedd rendbe az alapokat, a kódod tele van hibával. Egy jó bevezetőre/tutorialra van szükséged első körben.

Biztos vagyok, hogy hamarosan kapsz kész megoldásokat is, de ne foglalkozz velük, mert inkább csak gondot okoz, nem fogod látni a "nagy képet".
3

hiba

cica · 2013. Feb. 24. (V), 11.33
Tudom hogy hibás ez még nem a végleges, csak ezeket nem tudtam javítani. Dolgozom rajta.
1

A Tab billentyűnél is

Poetro · 2013. Feb. 24. (V), 11.28
A Tab billentyűnél is elállítódik a fókusz.

Ez teljesen természetes. Erre való a Tab gomb.
A másik problémám az Enter leütésekor kezdi előröl.

Teljesen természetes, mivel ekkor elküldi a böngésző az űrlapot.

Mindkettőt meg lehet akadályozni azzal, hogy megakadályozod az események alapértelmezett működését:
  1. function (event) {  
  2.   if (!event) {  
  3.     event = window.event;  
  4.   }  
  5.   if (event.preventDefault) {  
  6.     event.preventDefault();  
  7.   }  
  8.   else if ('returnValue' in event) {  
  9.     event.returnValue = false;  
  10.   }  
  11. }  
Vagy egyszerűen az eseménykezelőből false értékkel térünk vissza.

Lehetne text mező nélkül ezt?

Természetesen lehet. Akkor viszont a document-en vagy a body-n figyeld a gombok leütését.

A new Array használata nem ajánlott, vannak ismert problémás esetei. Használd inkább a ["Nyomd le a Backspace-t!", 8] formát.
4

tovább

cica · 2013. Feb. 24. (V), 11.57
Gondolom ez segít.
<html><head><title>Teszt</title>
<script language="JavaScript">
window.captureEvents(Event.KEYPRESS);
window.onkeypress = kiad;
function kiad(Esemeny){
 alert("Ön megnyomta a   " + Esemeny.which + "   gombot");
 window.captureEvents(Event.KEYPRESS);
 window.onkeypress = kiad;
}
</script>
</head><body>
 Üssön le egy billentyűt!
</body></html>
6

A captureEvents függvényt

Poetro · 2013. Feb. 24. (V), 18.30
A captureEvents függvényt tanácsos elfelejteni, mert nem szabványos. Helyette addEventListener.
7

Egyébként ez a captureEvents

Karvaly84 · 2013. Feb. 24. (V), 18.45
Egyébként ez a captureEvents nem csak az IE 6 elötti időkben volt használatos? Mert 6 alatt úgy emlékszem ment az esemény kezelés ez nélkül is. Sajnos IE 6 hiányában nem volt szerencsém ki probálni de lehet te tudsz rá válaszolni: Elképzelhető, hogy az ugynevezett custom event-ek nem müködnek ez nélkül IE-ben?

szerk.: ja nem ie-ben volt hanem mozilla-ban, de a kérdésem attol még fennál a custom event-el kapcsolatban.
8

Attól függ, mit nevezel

Poetro · 2013. Feb. 24. (V), 22.27
Attól függ, mit nevezel custom eventnek. Létezik szabványos implementáció is, ami van IE9 / Fx6 / Chrome / O11.6 óta elérhetó a CustomEvent.
5

Érdekes módszerekkel

Karvaly84 · 2013. Feb. 24. (V), 17.32
Érdekes módszerekkel operálsz. Valahol van egy régi könyvem kezdőknek, a 24 órás sorozatból. Ne adjam oda?
9

off

cica · 2013. Feb. 25. (H), 09.06
Kösz az offot. Megmutattad ki vagy.
11

Ezt azt hiszem kissé

iddqd · 2013. Feb. 25. (H), 11.12
Ezt azt hiszem kissé félreértetted!
13

Sztem félre értesz, én oda

Karvaly84 · 2013. Feb. 25. (H), 18.09
Sztem félre értesz, én oda szerettem volna neked ajándékozni egy olyan kiadványt amiből pár alap dolgot el tudtál volna sajátítani. A kódod alapján, pl. ahogy a változókat deklarálod nekem az jött le, hogy nem megfelelő a felkészültséged. De ha rossz néven vetted akkor természetesen majd másnak adom.
14

félreértés

cica · 2013. Feb. 26. (K), 17.34
Azt hiszem félreértettelek.
10

Jó tett helyébe....

iddqd · 2013. Feb. 25. (H), 11.12
Jó tett helyébe....
12

var

Poetro · 2013. Feb. 25. (H), 11.34
Fontosnak tartom megjegyezni, hogy úgy tűnik a változóidat adhoc jelleggel inicializálod. Azaz van, amit inicializálsz var kulcsszóval, van, amit nem. Utóbbinak hatására a változó globális lesz, illetve a globális változó értékét módosítja, aminek lehetnek kellemetlen mellékhatásai. Ezért legjobb, ha minden változót, ami nem függvény argumentum, var kulcsszóval inicializálsz.

Fontos lenne, hogy a kódodat megfelelően, de legalább konzisztensen tagold, például hogy látszódjon, hol ér kezdődik egy if és hol végződik egy for ciklus.
15

Teljesen igazad van. El

cica · 2013. Feb. 26. (K), 19.30
Teljesen igazad van. El szoktam választani, de ezt csak egy kiindulópontnak szántam. Csak a vázat próbáltam bemutatni érdemes-e ezen az úton elindulni. Kiderült hogy nem. Dolgozom rajta (próbálkozom). Gondolom van aki pár perc alatt megoldja a problémát, nekem tovább tart.
Ha valaki megajándékozna egy kész progival megköszönném.


Mindenkinek köszi a segítséget.
16

Kész megoldást nem adok, de

Poetro · 2013. Feb. 26. (K), 22.32
Kész megoldást nem adok, de egy jó kezdést:
  1. (function (d) {  
  2.   var body = d.body,  
  3.       keys = [  
  4.         //["Nyomd le a Backspace-t!", 8],  
  5.         ["Nyomd le a Tab-ot!", 9 ],  
  6.         ["Nyomd le az Enter-t!", 13],  
  7.         ["Nyomd le a Shift-et!", 16 ],  
  8.         ["Nyomd le a Ctrl-t!", 17],  
  9.         ["Nyomd le az Alt-ot!", 18],  
  10.         //["Nyomd le a Caps lock-ot!", 20],  
  11.         ["Nyomd le az Escape-t!", 27],  
  12.         ["Nyomd le a Page up-ot!", 33],  
  13.         ["Nyomd le a Page down-t!", 34],  
  14.         ["Nyomd le az End-et!", 35],  
  15.         ["Nyomd le a Home-t!", 36],  
  16.         ["Nyomd le a Bal nyilat!", 37],  
  17.         ["Nyomd le a Fel nyilat!", 38],  
  18.         ["Nyomd le a Jobbra nyilat!", 39],  
  19.         ["Nyomd le a Le nyilat!", 40]  
  20.       ],  
  21.       misses = 0,  
  22.       expected = -1,  
  23.       scoreElement,  
  24.       messageElement,  
  25.       score = 0;  
  26.     
  27.   function keypressHandler(event) {  
  28.     var keyCode;  
  29.     if (!event) {  
  30.       event = window.event;  
  31.     }  
  32.     keyCode = event.which ? event.which : event.keyCode;  
  33.     if (expected >= keys.length || keyCode === keys[expected][1]) {  
  34.       nextQuestion();  
  35.     }  
  36.     else {  
  37.       misses += 1;  
  38.     }  
  39.     return false;  
  40.   }  
  41.     
  42.   function nextQuestion() {  
  43.     expected += 1;  
  44.     alert('Kérdés: ' + (expected + 1));  
  45.     // TODO: implementálni  
  46.   }  
  47.     
  48.   if (body.addEventListener) {  
  49.     body.addEventListener('keydown', keypressHandler, false);  
  50.   }  
  51.   else if (body.attachEvent) {  
  52.     body.attachEvent('onkeydown', keypressHandler);  
  53.   }  
  54.   else {  
  55.     body.onkeydown = keypressHandler;  
  56.   }  
  57.     
  58.   nextQuestion();  
  59. })(document);  
17

Köszi

cica · 2013. Már. 1. (P), 15.33
Szép munka. Köszi.

Hogyan tovább?
18

Haha

Hidvégi Gábor · 2013. Már. 1. (P), 15.58
Néha azért jól esne személyeskedni. Na, mindegy, csak azt használják ki, aki hagyja magát.
20

kihasználni

cica · 2013. Már. 1. (P), 16.19
A segítség önkéntes. Ha úgyérzed hogy kihasználnak ne írj ide.

Megköszönném mindenkinek ha csak a témáról írna és nem offolna vagy stb.
21

Ne haragudj

Hidvégi Gábor · 2013. Már. 1. (P), 17.27
Azt hiszem, félreértettem a helyzetet, ezért bocsánatot kérek! Számomra úgy tűnt, hogy
  • a suliban kaptad ezt a feladatot
  • rákerestél valami kulcsszóra
  • találtál egy tizenöt éves példát, ami nem működött
  • bemásoltad ide
  • itt kaptál egy majdnem teljes megoldást
  • alapismeretek híján nem tudod befejezni
  • reméled, valaki majd ezt megteszi
22

Nem tudsz felülemelkedni

cica · 2013. Már. 1. (P), 19.40
Nem tudsz felülemelkedni önmagadon.
23

Semmi közöm hozzá,

Pepita · 2013. Már. 1. (P), 20.24
de szerintem ti mindketten félreértitek (itt) a másikat, emiatt rosszabbat feltételeztek róla, mint amilyen. Kérném - ha lehet -, hogy ne szúrkáljátok egymást, mert - engem - bánt, zavar, stb.

Viszont tényleg nincs közöm hozzá, tehát ha bárkit zavar ez a kommentem, nyugodtan törölhető.
24

Próbáltam nem piszkálódni.

cica · 2013. Már. 1. (P), 20.32
Próbáltam nem piszkálódni. Lásd feljebb "Megköszönném mindenkinek ha csak a témáról írna és nem offolna vagy stb."
Hú mi lett ebből.

Zárjuk le a témát.
19

A nextQuestion függvény

Poetro · 2013. Már. 1. (P), 16.18
A nextQuestion függvény implementációját kellene befejezned. Ennek ki kellene írni az üzeneteket, valamint kezelni ha vége a mókának.