HTML Accesskey Kullanımı

Merhaba arkadaşlar,

Bu yazımızda HTML accesskey ile buton vs. tıklamaları için klavyeden kısayol tanımlamalarını nasıl yaptığımız öğreneceğiz. Örneğin; sayfamızda Kopyala ve Yapıştır butonları var ve bu butonları tıkladığımızda bir alandaki metni kopyalayıp aynı alana yapıştırmak istiyoruz ve kısayol tuşları ile de bu işlemleri yapmak istiyoruz. Yapmamız gereken işlemler şöyledir:

// HTML İÇERİĞİ
<ul>
  <li>
   <button accesskey="c" onclick="kopyala()">Kopyala</button>
   <button accesskey="v" onclick="yapistir()">Yapıştır</button>
  </li>
  <li class="metin"></li>
</ul>
 
// JAVASCRİPT
function kopyala(){
  var $temp = $("");
  $("body").append($temp);
  $temp.val($('.metin').text()).select();
  document.execCommand("copy");
  $temp.remove();
  alert('Metin kopyalandı!');
}
 
function yapistir(){
  var metin = $('.metin').html();
  $('.metin').append(metin);
}

Stil kodlarımızı eklemedim, kendinize göre düzenleyebilirsiniz. Şimdi kodumuzu açıklayalım. İlk olarak HTML sayfamıza iki adet buton ekledik. Bu butonlara ACCESSKEY ile kısayol tanımladık. Bir de bu butonlara tıklanıldığında yapılacak işlemin fonksiyon adını yazdık. Kopyalama ve yapıştırma için kullanılacak içerik alanını ".metin" olarak tanımladık.

HTML ile ilgili işlemleri tamamladıktan sonra JAVASCRİPT ile kopyala() ve yapistir() fonksiyonlarımızın işlevlerini belirledik. Butonlara, fonksiyon bir işlev tanımlamazsak kısayol tuşlarına tıkladığımızda sadece buton seçili hale gelir.

Accesskey kısayollarının çalışabilmesi için Alt, Shift veya Ctrl kullanmak gerekiyor. Google Chrome için ALT+C ve ALT+V yi kullanabilirsiniz. Tarayıcıya göre kullanımlar aşağıdadır.

Browser

Windows

Linux

Mac

Internet Explorer

[Alt] + accesskey

N/A

Chrome

[Alt] + accesskey

[Alt] + accesskey

[Control] [Alt] + accesskey

Firefox

[Alt] [Shift] + accesskey

[Alt] [Shift] + accesskey

[Control] [Alt] + accesskey

Safari

[Alt] + accesskey

N/A

[Control] [Alt] + accesskey

Opera

Opera 15 or newer: [Alt] + accesskey
Opera 12.1 or older: [Shift] [Esc] + accesskey

Kodumuzun demosunu bu linkten kontrol edebilirsiniz.

Hepinize keyifli kodlamalar :)