Ödeme sistemlerinde genellikle kullanılan sanal klavyeleri görmüşsünüzdür. Merakımızın sonucu olarak aşağıdaki gibir bir yapı oluştu. Merak edenler için ödeme sistemlerinde kullanılan sanal klavyenin yapım aşamaları aşağıdadır. Sanal klavyenin çözümünü, tasarımını ve sanal klavye üzerinde tuş basım yani keypress olayının tetiklenmesi aşağıdaki gibidir. Bu arada farklı yöntemlerde mevcuttur.
Şimdi olayın yapım aşamasında aşağıdaki gibi bir yapı kullandık.
HTML — Biraz PHP karıştırdık içine. Üşengeçlik diyebilirsiniz. 🙂
<div class="numpad" id="virtual_keyboard"> <div id="virtual_kb_header"> SÜRÜKLE <b id="virtual_kb_close" title="Sanal Klavye'yi Kapat">X</b> </div> <div class="number_set"> <?php foreach ( array( 1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#' ) as $key => $value ) echo '<div><b>'.$value.'</b></div>'; ?> </div> </div>
CSS — virtual_keyboard normalde kapalıdır.
#virtual_keyboard
{
position: absolute;
z-index: 9999;
background-color: #f1f1f1;
text-align: center;
display: none;
padding: 10px;
border-radius: 10px;
}
#virtual_keyboard #virtual_kb_header
{
padding: 10px;
cursor: move;
z-index: 10;
background-color: #036ABB;
color: #fff;
border-radius: 5px;
}
#virtual_keyboard #virtual_kb_close
{
margin-left: 10px;
cursor: pointer;
padding: 2px 7px !important;
}
#virtual_keyboard .number_set
{
width: 140px;
}
#virtual_keyboard .number_set div
{
float: left;
width: auto;
background: #036ABB;
border-radius: 7px;
}
#virtual_keyboard .number_set div:nth-child(3n-2)
{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#virtual_keyboard .number_set div:nth-child(3n-1)
{
border-radius: 0px !important;
padding-left: 4px;
padding-right: 4px;
}
#virtual_keyboard .number_set div:nth-child(3n-0)
{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
#virtual_keyboard .number_set div b
{
width: 40px;
height: 40px;
border-radius: 10px;
border: 2px solid #fff;
text-align: center;
display: inline-block;
margin: 2px;
cursor: pointer;
line-height: 40px;
color: #fff;
font-weight: 400;
}
#virtual_keyboard #number_set div:hover
{
border: 2px solid #3DCC2D;
}
JavasScript — JQuery Kütüphanesi kullanılmıştır.
$( '#virtual_keyboard .number_set b' ).click( function()
{
$( '#credit-card' ).trigger( 'keypress' ).val( $( '#credit-card' ).val() + $( this ).text() ).trigger( 'keyup' );
});
$( '#virtual_keyboard' ).draggable();
Olay şu;
Kullanılan text nesnesinin ID si “credit-card”. Bu nesnenin içerisine yazarken aynı zamanda klavye üzerinden keypress-keyup özellikleri gerekiyordu. Bu tarafta yapılması gereken JS kodunda da dikkatiniz çeker ise nesne içerisinde VAL ile gönderirken önce keypress olayını tetikliyoruz, değerimizi yani aslen karakterimizi içerisine yazıyoruz ve sonra keyup olayını tetikleyip klavyeden basılmış gibi çalışıyor. Böylece kart ile doğrulama kütüphanesi keypress-keyup özelliklerini kullandığı için olaylar normal seyrinde devam ediyor.
.draggable ile sanal klavyemizi taşıyabilir pozisyona da getirmeyi ihmal etmiyoruz.
Sanal klavye üzerinde sadece Rakamlara ihtiyacımız olduğu için sadece rakamları yerleştirdik.Siz isterseniz Tüm alfabeyi doldurup işlem yaptırabilirsiniz.