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ı