Jquery ile Keypad-Numpad Yapımı
Javascript

Jquery ile Keypad-Numpad Yapımı

Merhaba arkadaÅŸlar. Bu yazımızda jquery yardımıyla sanal bir keypad-numpad yapacağız. Genelde bankaların internet sitelerine giriÅŸ ekranlarında rastladığımız türden birÅŸey yapacağız. İnput text alanına tıklandığında keypad açılacak ve fiziksel klavyemizden girdiÄŸimiz hiçbir deÄŸeri input text alanına yazmayacaktır. Ayrıca numaralar her açıldığında farklı yerlerde olacaktır. Öncelikle gerekli dosyaları sayfamıza import edeceÄŸiz. Script ve style etiketleriyle baÅŸlayan kodları head etiketleri arasına yazmamız gerekiyor ve en saÄŸlıklı kullanım biçimidir.

<link href="jquery.keypad.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.plugin.js"></script>
<script type="text/javascript" src="jquery.keypad.js"></script>
<script type="text/javascript" src="jquery.keypad-tr.js"></script>
Gerekli javascript sayfalarımızı import ettiysek ÅŸimdi javascript kodlarımıza geçelim.
$(function () {
$('#keypadimiz').keypad({randomiseNumeric: true});
$('#inlineKeypad').keypad({onClose: function() {
alert($(this).val());
}});
});
Bu kodlarımızı <script></script> etiketleri arasında yazılmalıdır. randomiseNumeric: true keypad'de açılan rakamlarının her seferinde farklı yerlerde çıkmasını saÄŸlamaktadır. keypadOnly: false ekleyerek fiziksel klavyemizden karakter eklenmesine de izin verebiliyoruz. Aralarına virgül koymamız yeterlidir. Daha güzel bir görüntü adına form elemanımızın görünümünde bir kaç deÄŸiÅŸiklik yapalım.
#keypadimiz {
border:solid;
border-color:#dddddd;
border-width:1px;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
border-radius: 0.25em;
font-size:14px;
padding:5px;
}
Ve son olarak body etiketleri arasına
<p><input type="text" id="keypadimiz"></p>
kodumuzu ekleyerek uygulamamızı tamamlamış oluyoruz. Sayfamıza import ettiÄŸimiz css ve js dosyalarını aÅŸağıdaki linkten edinebilirsiniz. Yararlı olması dileÄŸiyle. GörüÅŸmek üzere...
Js Dosyaları


author

Aykut ErdoÄŸan

jquery, keypad, numpad, javascript

  • Bu Yazılara da Gözat:

    0 Yorum

    Cevapla