JavaScript KeyCode’ları

Merhaba arkadaşlar,

JavaScript tarayıcı taraflı çalışan günümüz web sitelerinde çok sık kullanılan bir programlama dilidir. Çoğu zamanda sayfamızda bir işlem yapacağımız bazen bu tuş kodlarını ihtiyacımız olabilir. En basit örnek olarak yandaki giriş formunda jQuery ile Enter’a basılınca formun gönderilmesini sağladık. Çünkü yandaki formdaki buton submit işlevinde değildir. Sadece butondur. Enter tuşuna basıldığı zaman formu submit etmesini biz bildiriyoruz. İstersek Escape tuşuna basıldığı zamanda formun submit edilmesini sağlayabilirdik. Aşağıdaki tabloda klavyenizde bulunan gerekli tuş kodları bulunmaktadır.

Basılan tuş	Tuş Kodu
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
page down	34
end	35
home	36
sol tuşu	37
üst tuşu	38
sağ tuşu	39
aşağı tuşu	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
çarpma işareti	106
toplama işaret	107
eksi işareti	109
ondalık işareti	110
bölme işareti	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
eşittir	187
virgül	188
tire	189
slaş	191
ter slaş	220
tek tırnak	222

Bu keycode’larını kullanarak bir deneme yapalım:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;  
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml xml:lang=&quot;tr&quot; lang=&quot;tr&quot;&gt;  
  
&lt;head&gt;  
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;  
    &lt;meta name=&quot;author&quot; content=&quot;oralunal&quot; /&gt;  
  
    &lt;title&gt;keyCode - www.trkodlama.com&lt;/title&gt;  
    &lt;script src=&quot;jQuery_dizini/jQuery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;  
    &lt;script type=&quot;text/javascript&quot;&gt;  
        $(document).ready(function(){  
            $(&quot;#gizli&quot;).hide();  
            $(document).keyup(function(e) {  
                if(e.keyCode == '13') { //Enter tuşu  
                    $(&quot;#gizli&quot;).fadeIn();  
                }  
                else if(e.keyCode == '') { //Escape tuşu  
                    $(&quot;#gizli&quot;).fadeOut();  
                }  
            });  
        });  
    &lt;/script&gt;  
&lt;/head&gt;  
&lt;body&gt;  
&lt;div&gt;Bu div herkes tarafında görünecektir.&lt;/div&gt;  
&lt;div id=&quot;gizli&quot;&gt;Bu div Enter tuşuna basıldığı zaman görünecek Escape tuşuna basıldığı zaman kaybolacaktr.&lt;/div&gt;  
&lt;/body&gt;  
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>keyCode - www.trkodlama.com</title>

$(document).ready(function(){

$("#gizli").hide();

$(document).keyup(function(e) {

if(e.keyCode == '13') { //Enter tuşu

$("#gizli").fadeIn();

}

else if(e.keyCode == '') { //Escape tuşu

$("#gizli").fadeOut();

}

});

</script>

</head>

<body>

<div>Bu div herkes tarafında görünecektir.</div>

<div id="gizli">Bu div Enter tuşuna basıldığı zaman görünecek Escape tuşuna basıldığı zaman kaybolacaktr.</div>

</body>

</html>

Kullanımı gayet basit ve anlaşılır. Bu sayede $.keyup() fonksiyonunu da anlatmış oldum. Umarım faydalı olmuştur.

Kolay gelsin,

JavaScript KeyCode’ları

Yazar: Oral ÜNAL

Yorumlar

Bir yanıt yazın Yanıtı iptal et

JavaScript KeyCode’ları

Yazar: Oral ÜNAL

Bunlarda İlginizi Çekebilir

Yorumlar

Bir yanıt yazın Yanıtı iptal et