Javascript İle Dinamik Bir Sanal Klavye Uygulaması Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce herhangi bir özel kütüphaneye veya framework'e ihtiyacınız yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code gibi) yeterlidir. Projemizi üç ana dosya üzerinde kurgulayacağız:

• index.html: Klavye arayüzünün iskeletini oluşturur.
• style.css: Tuşların görsel tasarımı ve düzeni için kullanılır.
• script.js: Klavye mantığını ve tuş etkileşimlerini yönetir.

Kodlarınızı test etmek için herhangi bir yerel sunucu (Live Server eklentisi gibi) kullanmanız, yaptığınız değişiklikleri anlık görmeniz açısından faydalı olacaktır.

Adım 1: HTML İskeletini Oluşturma

Sanal klavyemizin temelini oluşturmak için bir konteyner ve tuşları barındıracak bir alan tanımlamalıyız. Aşağıdaki yapı, JavaScript ile dinamik olarak dolduracağımız tuş alanını temsil eder.

Burada textarea kullanıcı girdisini gösterecek, keyboard div'i ise JavaScript aracılığıyla oluşturacağımız tuşların yerleşeceği ana kapsayıcıdır.

Adım 2: CSS ile Klavye Tasarımı

Klavye tuşlarının düzenli görünmesi için Flexbox veya Grid yapısını kullanabiliriz. Aşağıdaki CSS, tuşların yan yana dizilmesini ve tıklanabilir bir görünüme kavuşmasını sağlar.

.keyboard-container { width: 100%; max-width: 600px; margin: auto; }
#keyboard { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; }
.key { padding: 15px; background: #eee; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; }
.key:hover { background: #ddd; }

Bu stil kuralları, tuşların birbirine olan mesafesini ve kullanıcı etkileşimi sırasındaki görsel tepkisini belirler.

Adım 3: JavaScript ile Tuşları Dinamik Oluşturma

Tuşları tek tek HTML içine yazmak yerine bir dizi (array) kullanarak JavaScript ile oluşturmak daha profesyonel bir yaklaşımdır. Bu sayede klavye düzenini kolayca değiştirebilirsiniz.

const keys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'];
const keyboardElement = document.getElementById('keyboard');

keys.forEach(key => {
    const button = document.createElement('button');
    button.textContent = key;
    button.classList.add('key');
    button.onclick = () => addToDisplay(key);
    keyboardElement.appendChild(button);
});

Bu kod bloğu, keys dizisindeki her eleman için bir buton oluşturur ve bunları keyboard div'ine ekler. onclick özelliği ile her tuşa tıklandığında addToDisplay fonksiyonunun tetiklenmesini sağlıyoruz.

Adım 4: Girdi Yönetimi ve Olay İşleme

Kullanıcı bir tuşa tıkladığında, bu değerin textarea içerisine eklenmesi gerekir. Aşağıdaki fonksiyon, mevcut metni alır ve üzerine yeni karakteri ekler.

const display = document.getElementById('display');

function addToDisplay(char) {
    display.value += char;
}

Bu basit fonksiyon, modern JavaScript'in value özelliğini kullanarak metin kutusunu günceller. Daha karmaşık uygulamalarda, imleç pozisyonunu (cursor position) takip etmek için selectionStart ve selectionEnd özelliklerini de kullanabilirsiniz.

Adım 5: Gelişmiş Özellikler ve Güvenlik

Uygulamanızı daha işlevsel hale getirmek için "Sil" (Backspace) ve "Boşluk" (Space) gibi özel tuşlar ekleyebilirsiniz. Ayrıca, kullanıcı girdilerini işlerken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız.

function handleSpecialKey(type) {
    if (type === 'backspace') {
        display.value = display.value.slice(0, -1);
    } else if (type === 'space') {
        display.value += ' ';
    }
}

Güvenlik Uyarısı: Eğer bu sanal klavyeyi bir şifre giriş alanı için kullanıyorsanız, verilerin tarayıcı konsolunda veya ağ trafiğinde açık metin (plain text) olarak görünmediğinden emin olun. Hassas verileri asla doğrudan DOM üzerinde tutmayın ve sunucu tarafında her zaman temizleme (sanitization) işlemi yapın.

Karşılaştırma: Sanal Klavye Yöntemleri

Sıkça Sorulan Sorular

Sanal klavye uygulaması mobil cihazlarda çalışır mı?

Evet, dokunmatik olayları (touchstart) desteklediği sürece mobil cihazlarda sorunsuz çalışır. Ancak, mobil cihazlarda zaten yerleşik bir klavye olduğu için bu uygulama genellikle özel kiosk sistemleri veya erişilebilirlik gerektiren durumlar için tercih edilir.

Tuşlara nasıl animasyon ekleyebilirim?

CSS transition özelliğini kullanarak tuşlara basıldığında renk değişimi veya ölçeklenme efekti verebilirsiniz.

Birden fazla dil desteği nasıl sağlanır?

Klavye tuşlarını bir nesne (object) içinde dillerine göre tanımlayıp, dil seçimi yapıldığında bu diziyi güncelleyerek dinamik bir yapı kurabilirsiniz.

Performans için neye dikkat etmeliyim?

DOM manipülasyonlarını minimize etmek ve gereksiz event listener oluşturmaktan kaçınmak uygulamanın hızını koruyacaktır.

Bu klavyeyi şifre girişi için kullanmak güvenli mi?

Doğrudan bir güvenlik çözümü değildir; ancak fiziksel tuş kaydedicilere (keyloggers) karşı bir miktar koruma sağlar. Tam güvenlik için mutlaka SSL/TLS ve sunucu tarafı doğrulama kullanmalısınız.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Ticari veya kritik güvenlik gerektiren projelerde kullanmadan önce profesyonel bir güvenlik denetiminden geçirilmesi önerilir.

Uygulama İçin İleri Düzey Optimizasyon Teknikleri

Sanal klavye uygulamanızın tarayıcı üzerinde akıcı çalışması için DOM işlemlerini minimize etmeniz gerekir. Her tuş basımında tüm klavyeyi yeniden oluşturmak yerine, sadece değişen durumu (state) güncellemek performansı ciddi oranda artıracaktır. Özellikle düşük donanımlı mobil cihazlarda Event Delegation (Olay Yetkilendirme) yöntemini kullanarak, her tuşa ayrı bir event listener atamak yerine, klavyenin ana kapsayıcısına tek bir dinleyici eklemek bellek kullanımını optimize eder.

// Kötü Pratik: Her tuşa ayrı listener
// document.querySelectorAll('.key').forEach(k => k.addEventListener(...));

// İyi Pratik: Event Delegation
const keyboardContainer = document.querySelector('#keyboard');
keyboardContainer.addEventListener('click', (event) => {
    if (event.target.classList.contains('key')) {
        const keyValue = event.target.dataset.value;
        handleKeyPress(keyValue);
    }
});

Ayrıca, klavyenin görünürlüğünü yönetirken display: none yerine visibility: hidden veya opacity kullanmak, tarayıcının "reflow" (düzenleme) maliyetini düşürür. Eğer klavyeniz çok sayıda tuş içeriyorsa, bu tuşları bir Virtual DOM mantığıyla veya DocumentFragment kullanarak tek seferde DOM'a eklemek, sayfa yüklenme süresini (LCP) iyileştirir.

Hata Ayıklama ve Test Süreçleri

Sanal klavyeler, özellikle farklı tarayıcı motorlarında (WebKit, Blink, Gecko) beklenmedik davranışlar sergileyebilir. Uygulamanızın kararlılığını sağlamak için şu test stratejilerini izlemelisiniz:

• Edge Case Testleri: Özel karakterler, boşluk tuşu ve silme tuşunun ardışık basımlarında girdi alanının (input field) odak noktasını kaybetmediğinden emin olun.
• Tarayıcı Uyumluluğu: Chrome, Firefox ve Safari'de pointer-events davranışlarını kontrol edin. Bazı mobil tarayıcılarda "tap" (dokunma) olayları gecikmeli tetiklenebilir; bunu engellemek için CSS'te touch-action: manipulation; özelliğini kullanın.
• Hata Yakalama: Kullanıcı klavyeyi kullanırken oluşabilecek hataları try-catch blokları ile sarmalayarak, uygulamanın çökmesini engelleyin ve kullanıcıya geri bildirim verin.

Aşağıdaki örnek, bir tuş basımı sırasında oluşabilecek hataları yönetmek için kullanabileceğiniz basit bir hata ayıklama yapısını göstermektedir:

function handleKeyPress(value) {
    try {
        const inputField = document.querySelector('#user-input');
        if (!inputField) throw new Error("Girdi alanı bulunamadı!");
        
        inputField.value += value;
    } catch (error) {
        console.error("Klavye Hatası:", error.message);
        // Kullanıcıya hata mesajı gösteren bir UI fonksiyonu çağırılabilir
    }
}

Geliştirme sürecinde Chrome DevTools içerisindeki "Performance" sekmesini kullanarak, tuşlara basıldığında oluşan "Scripting" ve "Rendering" sürelerini takip edebilir, darboğaz yaratan fonksiyonları kolayca tespit edebilirsiniz.

Sonuç

JavaScript ile dinamik bir sanal klavye oluşturmak, DOM manipülasyonu ve olay yönetimi yeteneklerinizi geliştirmek için harika bir projedir. Bu temel yapı üzerine, tuşlara ses efekti ekleyebilir, sürükle-bırak özelliği ile klavyenin yerini değiştirebilir veya farklı karakter setleri tanımlayarak uygulamayı zenginleştirebilirsiniz. Bir sonraki adım olarak, klavye düzenini bir JSON dosyasından çekerek uygulamanızı daha modüler hale getirmeyi deneyebilirsiniz.