HTML Sayfasına Klavye Kısayolu Eklemek
-
10 Ekim 2022 • 15 dakikalık okuma
Bir html sayfasında klavye kısayolu eklenerek istenilen işlemler yaptırılabilir. İki farklı yöntem ile html sayfasına kısayol özelliği eklenebilir;
Sadece HTML İle
Html öğelerdeki accesskey özelliği ile sadece html kullanarak kod yazmadan kısayol özelliği eklenebilir;
Kod
<body>
<ul>
<li><a href="http://melihsafran.com/blog" target="_blank" accesskey="b">Blog</a></li>
<li><a href="http://melihsafran.com/about" target="_blank" accesskey="a">Hakkımda</a></li>
<li><a href="http://melihsafran.com/contact" target="_blank" accesskey="c">İletişim</a></li>
</ul>
<button id="btnCancel" accesskey="x" onclick="console.log('İptal')">İptal</button>
<button id="btnSave" accesskey="s" onclick="console.log('Kaydet')">Kaydet</button>
</body>
Firefox ile Alt + Shift + tuş , Opera ve Chrome ile Alt + tuş kullanılarak çalıştırılır.
Bu yöntemin eksi yönü sadece accesskey özelliğini destekleyen güncel tarayıcılarda çalışması ve kısayol tuşu kombinasyonu tüm tarayıcılar için aynı olmamasıdır.
JavaScript Kodu İle
JavaScript kodu ile istenilen kısayol harfinin ASCII kodu yazılır;
Kod
<script>
document.addEventListener('keyup', function(e){
if(e.ctrlKey && e.shiftKey && e.altKey && e.which === 83){
save();
}
}, false);
function save(){
console.log("Ctrl + Shift + Alt + S tuşlarına basıldı.",);
}
</script>
Örneğin; Ctrl + Alt + Shift + S , kullanılarak yazılan JavaScript fonksiyonu çalıştırılır.
Harfler İçin ASCII Kodları
| Karakter | Değer |
|---|---|
| A | 65 |
| B | 66 |
| C | 67 |
| D | 68 |
| E | 69 |
| F | 70 |
| G | 71 |
| H | 72 |
| I | 73 |
| J | 74 |
| L | 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 |
Kaynaklar
- HTML-only Keyboard Shortcuts , amitmerchant.com, 10.10.2022 tarihinde alındı.
- accesskey , developer.mozilla.org, 10.10.2022 tarihinde alındı.
- How to Add Keyboard Shortcut to Elements in HTML , webtips.dev, 10.10.2022 tarihinde alındı.
- How can I add a keyboard shortcut to an existing JavaScript Function? , stackoverflow.com, 10.10.2022 tarihinde alındı.
- ASCII Table , cs.cmu.edu, 10.10.2022 tarihinde alındı.
Beğen