JavaScript onKeyPress olayı (event), ilgili elementin içinde veya üzerinde kullanıcı bir tuşa bastığı veya basılı tuttuğu zaman tetiklenir. HTML onKeyPress özelliği element üzerinde keypress olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.
HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.
HTML Sözdizimi
<element onkeypress="betik" > ... </element>
DOM Sözdizimi
element.onkeypress = fonkBetik;
betik = element.onkeypress
| betik | onkeypress olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir. |
| fonkBetik | onkeypress olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir. |
Dönüş Değeri
| betik | Fonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner. |
Örnek
Aşağıdaki örnek, onKeyDown, onKeyPress ve onKeyUp olay tutucularının metin kutusu (textbox) girişinde bir tuşa basıldığı zaman gerçekleşme sırasını göstermektedir.
<html>
<head>
<title>JavaScript onKeyDown, onKeyPress ve onKeyUp Olay tutucuları</title>
<script type="text/javascript">
var Sira = 1;
function On_KeyDown() {
document.getElementById('OnDownBilgi').innerHTML = Sira +". : onKeyDown oldu!";
Sira++; }
function On_KeyPress() {
document.getElementById('OnPressBilgi').innerHTML = Sira +". : onKeyPress oldu!";
Sira++; }
function On_KeyUp() {
document.getElementById('OnUpBilgi').innerHTML = Sira +". : onKeyUp oldu!";
Sira++; }
function Temizle() {
document.getElementById('Giris').value = "";
document.getElementById('OnDownBilgi').innerHTML = "";
document.getElementById('OnPressBilgi').innerHTML = "";
document.getElementById('OnUpBilgi').innerHTML = "";
Sira = 1; }
</script>
</head>
<body>
<input id="Giris" type="text" onKeyDown="On_KeyDown()" onKeyPress="On_KeyPress()" onKeyUp="On_KeyUp()">
<div id="OnDownBilgi" style="color:red;"></div>
<div id="OnPressBilgi" style="color:red;"></div>
<div id="OnUpBilgi" style="color:red;"></div>
<input type="button" value="Temizle" onClick="Temizle()">
</body>
</html>
Canlı Sonuç
Elementler
keypress olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri
A (Anchor) | ABBR | ACRONYM | ADDRESS | AREA | B (Bold) | BIG | BLOCKQUOTE | BODY | BUTTON | CANVAS | CAPTION | CITE | CODE | COL | COLGROUP | DD | DEL | DFN | DIV | DL | DT | EM | FIELDSET | FORM | H1,H2,H3,H4,H5,H6 | HR | I (Italic) | IMG | INPUT | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | INS | KBD | LABEL | LEGEND | LI | LINK | MAP | MARQUEE | NOFRAMES | NOSCRIPT | OBJECT | OL | OPTGROUP | OPTION | P (Paragraph) | PRE | Q (Quote) | SAMP | SELECT | SMALL | SPAN | STRONG | SUB | SUP | TABLE | TBODY | TD | TEXTAREA | TFOOT | TH | THEAD | TR | TT | U (Underline) | UL | VAR