Javascript Sanal Klavye Yapalım

CSS & JavaScript & DOM Umut Çetinkaya

Merhaba arkadaşlar tekrardan farklı bir örneği sizinle paylaşmaktan mutluluk duyuyorum. Şuanda ü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 .

Başlıyoruz

İlk önce basit bir form oluşturuyoruz !

Basit Bir Form ...

 İşte bu şekilde iki input’tan oluşan bir form oluşturduktan sonrasında ise kodlarımıza geçiyoruz . Başta sölediğim gibi bu örnek basit sadece mantığını anlatmak için oluşturulmuş bir örnek . Siz ne kadar geliştirirseniz o kadar büyücek 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 baslamak .

javascript fonksiyonları

Javascript

işte arkadaşlar gördüğünüz gibi temelde 3 kalıp fonksiyonu birleşimi .
1. fonksiyon birinci inputtan ikinci inputa geçtiğimizde 1. input için görünen alanın kaybolmasını saglıyor . Aynı şekilde tam terside geçerli tabiki .

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 klavyede 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İTTİ … :)

Uygulamanın Çalışır Hali İçin Tıklayınız !

Uygulamayı İndirmek İçin Tıklayın !

 

UMUT ÇETİNKAYA - Msn : umut@maksinet.com

Toplamda 3174 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 2 kez okunmuş.

Etiketler:

1 oy2 oy3 oy4 oy5 oy (4 oy, ortalama 4.5) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Ajax Olmasaydı Ne Yapardık ? :)
  3. Sağlamlığı Kanıtlanmış Tekniklerle Web 2.0 AJAX

Trackback Yorumları takip et Baskı Önizleme

6 yorum var

  1. # o-d | 25 Şubat 2008, 21:04 Gravatar

    css ile biraz düzenlenirse aslında çok iyi olur. Teşekkürler paylaştığınız için.

  2. # Javascript ile sanal klavye yapımı - Göstergeç.net | 26 Şubat 2008, 10:20 Gravatar

    […] Bankalar, alışveriş siteleri, vb. sitelerde sıkça karşımıza çıkan sanal klavye uygulamasını kendi sitenizde kullanmak istiyorsanız bu örnek uygulamadan faydalanabilirsiniz. Fakat biraz geliştirilmesi gerekiyor. Site : http://ajax-tr.com/javascript-sanal-klavye-yapalim Demo : http://www.maksinet.com/ornekler/sanal_klavye/index.html İndir : http://www.maksinet.com/ornekler/sanal_klavye/indir.rar  Kategori: Javascript, Uygulama […]

  3. # İsmail ALTUNTAŞ | 26 Şubat 2008, 16:35 Gravatar

    Teşekkürler çok güzel bir uygulama.

  4. # isimsiz | 09 Mart 2008, 11:33 Gravatar

    bence çok gereksiz birşey çünkü smiley fonksiyonuyla tamamen aynı :)

  5. # @hmed | 22 Mart 2008, 15:02 Gravatar

    saolasın cidden faydalı bişi teşekkürler

  6. # Wmismail | 23 Nisan 2008, 22:04 Gravatar

    Bankaların kullandığı sistemi hep merak ediyordum :) Şimdi çaktım. Teşekkürler :)

Yorum yazın

sayfa sayacı