jQuery İle KeyPad Oluşturma
Bu yazımızda kullanıcıdan talep edilen hayati önem taşıyan bazı bilgilerin alınması esnasında kullanılan bir yapıdan bahsedeceğiz.Genellikle bankaların internet şubelerinde kullanılmakta olan KeyPad yapısı sayesinde kullanıcıdan alınan şifrenin keyloger gibi programlar tarafından kaydedilmesini önleyebilmek, ve hatta olabilecek türlü sıkıntılara karşı daha kompleks tedbirler sağlayıp var olan tuş kombinasyonunu karıştırarak kullanıcıya güvenli şifre girişini sağlayabilmekteyiz.
Şimdi a’dan z’ye kendi ellerimle oluşturmuş olduğum KeyPad algoritmasını sizlere sunacağım.
Öncelikle KeyPad için css dosyamızı oluşturalım.
---KeyPadStyle.css---
klavye {
width: 200px;
border: 1px solid black;
display: inline-block;
}
tus, del, rdm {
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: calc(25%);
height: 25px;
margin: 5px;
background: black;
color: white;
text-align: center;
font-size: 12px;
font-weight: bold;
float: left;
cursor: pointer;
}
KeyPad’i uygulayacağımız html taslağınıda aşağıdaki gibi oluşturuyorum.
<html>
<head>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="KeyPadScript.js"></script>
<link rel="stylesheet" href="KeyPadStyle.css" type="text/css" media="all" />
<style>
.input {
width: 40%;
height: 29px;
border: ridge;
margin-top: 2px;
}
</style>
</head>
<body>
<input class="input sifre" name="uye" type="text" placeholder="Şifre" />
<div id="keypad">
<klavye>
<tus>1</tus>
<tus>2</tus>
<tus>3</tus>
<tus>4</tus>
<tus>5</tus>
<tus>6</tus>
<tus>7</tus>
<tus>8</tus>
<tus>9</tus>
<rdm>&</rdm>
<tus>0</tus>
<del>←</del>
</klavye>
</div>
</div>
</body>
</html>
Sıra KeyPad’i işlevsel hale getirecek jQuery ile oluşturulmuş algoritmaya geldi.
---KeyPadScript.js---
$(document).ready(function () {
$("#keypad").hide();//Sayfanın ilk açılışında KeyPadı gizliyoruz.
var sifre = "";
//burada sifreye tıklandığı zaman kaypad açılmaktadır.
$(".sifre").click(function () {
sifre = $(this);
if ($("#keypad").css("display") == "none") {
$("#keypad").show(1000);
//Şifre inputuna tıklandığında keypad gözükecektir.
} else {
$("#keypad").hide(1000);
//Şifreye bir daha tıklandığında keypad açıksa eğer kapanacaktır.
}
});
$(document).on("click", "klavye tus", function () {
//Şifreye keypadden veri girişi yapıyor.
sifre.val(sifre.val() + $(this).html());
});
$(document).on("click", "klavye rdm", function () {
//Bu fonksiyonda keypad karıştırılıyor.
var Tuslar = $("klavye").children("tus").toArray();
Tuslar = Tuslar.sort(function () { return 0.5 - Math.random() });
$("klavye").html("");
$.each(Tuslar, function (index, tus) {
if (index == 1) {
var yeridegisecektus = $("<rdm>&</rdm>");
$("klavye").prepend(yeridegisecektus);
//Random tuşunun yeri sabitleştiriliyor.
} else if (index == 0) {
var yeridegisecektus = $("<del>←</del>");
$("klavye").prepend(yeridegisecektus);
//Silme tuşunun yeri sabitleştiriliyor.
}
var yeridegisecektus = $("<tus>" + $(this).text() + "</tus>");
$("klavye").prepend(yeridegisecektus);
});
});
$(document).on("click", "klavye del", function () {
//Şifreye keypadden veri girişi yapıyor.
sifre.val(sifre.val().substring(0, sifre.val().length - 1));
});
var Durum = false;
$("*").click(function (event) {
//Keypad dışına tıklandığında kapanmakta
if (!Durum) {
Durum = true;
return false;
} else {
if (!$(event.target).is("klavye") && !$(event.target).is("tus") && !$(event.target).is("del") && !$(event.target).is("rdm") && !$(event.target).is(".sifre")) {
$("#keypad").hide(1000);
return;
}
}
});
});
Buyurun, güle güle kullanın…
Kaynak dosyayı indirmek için buraya tıklayınız.
İyi çalışmalar dilerim…
Teşekkürler