صفحه کلید مجازی با کلیدهای تصادفی با استفاده از jQuery و jQueryUI

یک روز که داشتم دنبال صفحه کلید مجازی برای پروژه ام می گشتم، این صفحه کلید به نظرم جالب اومد:

 اما بعد از دریافت و قرار دادن این صفحه کلید توی نرم افزارتون متوجه می شید که کلیدهای اون همیشه ثابت هستند. برای افزایش امنیت بهتره هر بار ترتیب کلیدها عوض بشه. برای این منظور، طوری ویرایشش کردم که کلیدهاش هر بار جاشون عوض بشه.

برای استفاده از این صفحه کلید ابتدا اون رو از اینجا دریافت کنید و همون طور که تو فایل دریافتی موجوده، موارد زیر رو به بخش header صفحه ی HTML تون اضافه کنید (به jQuery و jQueryUI هم نیاز دارید):

<script src="../script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../script/jquery.keyboard.min.js" type="text/javascript"></script>
<script src="../script/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="../script/jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<link href="../style/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="../style/keyboard.css" rel="stylesheet" type="text/css" />

حالا برای معرفی این که کدوم ورودی باید به این صفحه کلید مجهز بشه، از این کد استفاده کنید:

$(function () {
    jQuery("#pass").keyboard({ openOn: null, stayOpen: true }).addTyping();
    $("#pass").focus(function () { $('#pass').getkeyboard().reveal(); });
 });

مثال کاملش رو می تونید اینجا ببینید. (Source code رو ببینید)