Főoldalra

Klaviature, billentyűzeti események.


keydown     Billentyű lenyomására aktíválódik.
                        Minden billentyű lenyomására, beleértve a műveleti billentyűket is, aktiválódik.
                             Kivétel a Print-Screen billentyű, melyet nem vesz figyelembe.

keyup         Billentyű felengedésekor aktíválódik.
                        Minden billentyű lenyomására, beleértve a műveleti billentyűket is, aktiválódik.
                             Kivétel a  Tab billentyű, melyet nem vesz figyelembe.
						
keypress     Szövegírásra alkalmas billentyűk, lenyomására aktíválódik.
                        Minden karakter billentyű lenyomására aktiválódik, de a műveleti és Print-Screen billentyűkre, nem.
                             Aktiv, Shift+karakter és Alt+karakter esetén is.

						
event.which  Feladata, visszaadni a leütött karakterek kódját.
                           1. keydown és keyup alkalmazásnál:
                                   - Nem tesz különbséget kis és nagybetűk között, mindig a nagybetűk kódját adja vissza.
                                   - Nem ismeri az ékezetes karaktereket, és ezeknél, nem az elvárt kódszámot kapjuk.
                           2. keypress alkalmazásnál:
                                   - Szövegírásra alkalmas billentyűknél, az ékezetes karakterek kódszáma is, jó.


Teszt példák.

1. keydown:

Minden billentyűlenyomására aktíválódik.
Beleértve a műveleti billentyűket is.
Kivétel a Print-Screen billentyű, melyet nem vesz figyelembe.

Teszteléshez kattintsunk a szövegablakba, és nyomjunk le
tesztszőleges billentyűt.

Első lenyomáskor sárga háttérszín jelenik meg, és számlálja a lenyomásokat.


Szövegablak.

Billentyű:
Lenyomások száma = 0
Kódja = 0

Billentyű = 0

2. keyup

Minden billentyűfelengedésekor aktíválódik.
Beleértve a műveleti billentyűket is.
Kivétel a TAB billentyű, melyet nem vesz figyelembe.

Teszteléshez kattintsunk a szövegablakba, és nyomjunk le, majd
engedjünk fel, tesztszőleges billentyűt.

Első lenyomáskor pink háttérszín jelenik meg, és számlálja a felengedéseket.


Szövegablak.

Billentyű:
Felengedések száma = 0
Kódja = 0

Billentyű = 0

3. keypress

Szövegírásra alkalmas billenytűlenyomáskor aktiválódik.
Aktiv, Shift+karakter és Alt+karakter esetén is.
Műveleti és Print-Screen billentyűkre, nem aktiv.

Kattintsunk a szövegablakba, és üssünk le, szövegírásra alkalmas billentyűt.

Szövegablak.

Leütött billentyű = 0

Billentyű kódja = 48
Lenyomások száma = 0

4. onKeyPress -- keyCode.

Szövegírásra alkalmas billenytűlenyomáskor aktiválódik.
Aktiv, Shift+karakter és Alt+karakter esetén is.
Műveleti és Print-Screen billentyűkre, nem aktiv.

Kattintsunk a szövegablakba, és üssünk le, szövegírásra alkalmas billentyűt.

Szövegablak.

Szövegírási stringeknél:

Leütött billentyű = 0

Billentyű kódja = 48

Megjegyzés:
Teszteléskor a "Space" billentyűt, szövegablakba kattintás után
üssük le, oldalgördítés elkerülése végett.
Minden más billentyűt, oldal bármelyik területén történő kattintás után, leüthetjük.



Leírások.

1. Teszt példa: keydown.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Klaviature, billentyűzeti események.</title>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="klaviature.js"> </script>
</head>
<body> <div id="container">

<h3>1. keydown:</h3> 
<p><strong>Minden billentyűlenyomására aktíválódik.<br>
Beleértve a műveleti billentyűket is.<br>
Kivétel a Print-Screen billentyű, melyet nem vesz figyelembe.</strong></p>

<p>Teszteléshez kattintsunk a szövegablakba, és nyomjunk le<br> tesztszőleges billentyűt.</p>
<p>Első lenyomáskor sárga háttérszín jelenik meg, és számlálja a lenyomásokat.</p><br>
Szövegablak.<br>
<textarea name="textareakeydown" id="textareakeydown" cols="40" rows="3"></textarea>

<div id="keydowninfo">
<h3>Billentyű:<br> Lenyomások száma = <span id="lenyomasszama">0</span><br>
Kódja = <span id="keydownkodszam">0</span></h3>
<h3>Billentyű = <span id="keydownbillentyu">0</span></h3>
</div>

</div> </body>
</html>

stilus.css

body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc; }
#container {width: 950px; padding: 2px; margin-right: auto; margin-left: auto;}
#keydowninfo{border:2px solid red; background-color:  orange;}
#textareakeydown{ font-weight: normal; font-size:18px;}
#keydownbillentyu{color: white; background-color: black; border: 10px outset black; padding: 5px;}

klaviature.js

$(document).ready(function(){ 
// 1. keydown
   var lenyomva=0;
	$("#textareakeydown").keydown(function(){
		lenyomva++;
		$("#textareakeydown").css("background-color", "yellow");
		$("#lenyomasszama").html(lenyomva);	
		
	// A "keydown" billentyű azonosításra, ékezetes karakterekhez, nem jó.
            keydownkod=event.which;
            keydownhtml="&#"+keydownkod+";";
            $("#keydownkodszam").html(keydownkod);
		  
		switch(keydownkod) {
          case 8: $("#keydownbillentyu").html("Back Space"); break;
          case 9: $("#keydownbillentyu").html("Tab"); break;
          case 13: $("#keydownbillentyu").html("Enter"); break;
          case 16: $("#keydownbillentyu").html("Shift"); break;
          case 17: $("#keydownbillentyu").html("Ctrl"); break;
          case 18: $("#keydownbillentyu").html("Alt"); break;
          case 19: $("#keydownbillentyu").html("Pause Break"); break;
          case 20: $("#keydownbillentyu").html("Caps Lock"); break;
          case 27: $("#keydownbillentyu").html("Esc"); break;
          case 32: $("#keydownbillentyu").html("Space"); break;
          case 33: $("#keydownbillentyu").html("Page Up"); break;
          case 34: $("#keydownbillentyu").html("Page Down"); break;
          case 35: $("#keydownbillentyu").html("End"); break;
          case 36: $("#keydownbillentyu").html("Home"); break;
          case 37: $("#keydownbillentyu").html("&larr;"); break;
          case 38: $("#keydownbillentyu").html("&uarr;"); break;
          case 39: $("#keydownbillentyu").html("&rarr;"); break;
          case 40: $("#keydownbillentyu").html("&darr;"); break;
          case 44: $("#keydownbillentyu").html("Print Scren"); break;
          case 45: $("#keydownbillentyu").html("Insert"); break;
          case 46: $("#keydownbillentyu").html("Delete"); break;
          case 93: $("#keydownbillentyu").html("Info"); break;
          case 112: $("#keydownbillentyu").html("F1"); return false; break;
          case 113: $("#keydownbillentyu").html("F2"); return false; break;
          case 114: $("#keydownbillentyu").html("F3"); return false; break;
          case 115: $("#keydownbillentyu").html("F4"); return false; break;
          case 116: $("#keydownbillentyu").html("F5"); return false; break;
          case 117: $("#keydownbillentyu").html("F6"); return false; break;
          case 118: $("#keydownbillentyu").html("F7"); return false; break;
          case 119: $("#keydownbillentyu").html("F8"); return false; break;
          case 120: $("#keydownbillentyu").html("F9"); return false; break;
          case 121: $("#keydownbillentyu").html("F10"); return false; break;
          case 122: $("#keydownbillentyu").html("F11"); return false; break;
          case 123: $("#keydownbillentyu").html("F12"); return false; break;
          case 144: $("#keydownbillentyu").html("Num Lock"); break;
          case 145: $("#keydownbillentyu").html("Scroll Lock"); break;
		  
	      default: $("#keydownbillentyu").html(keydownhtml);
        }  
  
	});

});



3. Teszt példa: keypress.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Klaviature, billentyűzeti események.</title>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="klaviature.js"> </script>
</head>

<body> <div id="container">

<h3>3. keypress</h3>
<p>Szövegírásra alkalmas billenytűlenyomáskor aktiválódik.<br>
Aktiv, Shift+karakter és Alt+karakter esetén is.<br>
Műveleti és Print-Screen billentyűkre, nem aktiv.</p>
<p>Kattintsunk a szövegablakba, és üssünk le, szövegírásra alkalmas billentyűt.</p>

Szövegablak.<br>
<textarea name="textareakeypress" id="textareakeypress" cols="40" rows="3"></textarea>

<div id="keypressinfo">
<h3>Leütött billentyű = <span id="keypressbillentyu">0</span> </h3>
<h3>Billentyű kódja = <span id="keypresskodszam">48</span> <br>
Lenyomások száma = <span id="keypressszama">0</span> </h3>
</div>

</div> </body>
</html>

stilus.css

body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc; }
#container {width: 950px; padding: 2px; margin-right: auto; margin-left: auto;}
#keypressinfo{border:2px solid red; background-color:  orange;}
#textareakeypress{ font-weight: normal; font-size:18px;}
#keypressbillentyu{color: white; background-color: black; border: 10px outset black; padding: 5px;}

klaviature.js

$(document).ready(function(){

// 3. keypress. Szövegíráshoz alkalmazható billentyűkhöz.
	var press=0;
	$("#textareakeypress").keypress(function(){
        press++;	
		$("#textareakeypress").css("background-color", "yellow");
		$("#keypressszama").html(press);	
		
            keypresskod=event.which;
            keypresshtml="&#"+keypresskod+";";
              $("#keypresskodszam").html(keypresskod);
		  
        switch(keypresskod) {
         case 13: $("#keypressbillentyu").html("Enter");  break;
         case 32: $("#keypressbillentyu").html("Space"); break;
         default: $("#keypressbillentyu").html(keypresshtml);
        }
		
	});
});



4. Teszt példa: onKeyPress -- keyCode..

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Klaviature, billentyűzeti események.</title>
<link href="stilus.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
function LeutottKarakter(e) {
    // Melyik billentyűt nyomták le.
      if (e.keyCode) keycode=e.keyCode;
      else keycode=e.which;
      kkod=String (keycode);

    // A kódszám kiíratási objektum megkeresése.
       k = document.getElementById ("JSkod");
	   
    // A karakterkódok kiíratása.
       k.innerHTML ="";
       k.innerHTML = kkod;

    // A billentyű megjelenítési objektum megkeresése.
        jsbil = document.getElementById ("jsbillentyu");
        jsbil.innerHTML ="";
        if(kkod==13){leutottbillentyu="Enter";}
        else if(kkod==32){leutottbillentyu="Space";}
          else{leutottbillentyu="&#"+kkod+";";}

        jsbil.innerHTML += leutottbillentyu;
}
</script>
</head>

<body onKeyPress="LeutottKarakter(event);">

<h3>4. onKeyPress  -- keyCode.</h3>
<p>Szövegírásra alkalmas billenytűlenyomáskor aktiválódik.<br>
Aktiv, Shift+karakter és Alt+karakter esetén is.<br>
Műveleti és Print-Screen billentyűkre, nem aktiv.</p>

<p>Kattintsunk a szövegablakba, és üssünk le, szövegírásra alkalmas billentyűt.</p>

Szövegablak.<br>
<textarea name="textareaonkey" id="textareaonkey" cols="40" rows="3"></textarea>

<div id="valoskeykod">
<p>Szövegírási stringeknél:</p>
<h3>Leütött billentyű =  <span id="jsbillentyu">0</span> </h3>
<h3>Billentyű kódja =  <span id="JSkod">48</span> </h3>
</div>

</body>
</html>

A stilus.css

#valoskeykod{border:2px solid red; background-color:  orange;}
#textareaonkey{ font-weight: normal; font-size:18px;}
#jsbillentyu{color: white; background-color: black; border: 10px outset black; padding: 5px;}
#JSkod{font-size: 25px; font-weight: bold; text-align: center;}