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">Gerekli javascript sayfalarımızı import ettiysek ÅŸimdi javascript kodlarımıza geçelim.
<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>
$(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ı
0 Yorum