JavaScript ile Sanal Klavye

JavaScript ile sanal klavye yapıyoruz.

Merhaba arkadaşlar,

Tekrardan farklı bir örneği sizinle paylaşmaktan mutluluk duyuyorum. Şu anda üzerinde çalıştığım bir alışveriş sistemi için gerekli olan sanal klavye uygulamasının yapımını burdan sizinle paylasmak istedim. Klavye basit biraz, artık burdan mantığını alıp geliştirmek size düşüyor.



İşte bu şekilde iki input'tan oluşan bir form oluşturduktan sonrasında ise kodlarımıza geçiyoruz. Başta söylediğim gibi bu örnek basit, sadece mantığını anlatmak için oluşturulmuş bir örnek. Siz ne kadar geliştirirseniz o kadar büyüyecek ve güzelleşecektir; buna inanıyorum.

İlk önce input değerlerinden herhangi birisine tıklandığında sağ kısımda küçük bir alanın görünmesini, diğer input'a tıkladığımızda ise o input değeri için olan alanın görünmesini, diğer alanın ise gizlenmesini istiyoruz. O halde yapmamız gerek input'lara birer onclick eklemek ve javascript fonksiyonumuzu yazmaya başlamak.



İşte arkadaşlar, gördüğünüz gibi temelde 3 kalıp fonksiyonun birleşimi.

1. fonksiyon birinci inpu'ttan ikinci input'a geçtiğimizde 1. input için görünen alanın kaybolmasını sağlıyor. Aynı şekilde tam tersi de geçerli tabi ki.

2. fonksiyon ise sanal klavyeyi gösteren gizleyen alan!

3. fonksiyon gurbu ise sanal klavye içindeki değerleri inputların içerisine yazmaya yarayan fonksiyon .

Şimdi ise sanal klavyeyi gösterelim. Sanal klavye de burda çok basit bir şekilde. Tekrardan üzerinde bastırmak istiyorum, bu örneği göz önüne alarak çok değişik şeyler geliştirebilirsiniz.

Sanal Klavye Kodları


Büyük hali için tıklayınız.


  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Geliştirilebilecek bir ders olmuş,Teşekkürler.
Silme tuşunuda eklemek istiyorum.onun için ne yapmam gerekiyor acaba.Reset değil klavyedeki BACKSPACE gibi silmesini istiyorum her tıklamada. Şimdiden Teşekkürler.:kirp:
Arkadaşlar bir bilgisi olan yok mu ?İş için lazım :)

Yukarı Git