آموزش استفاده از کیبورد مجازی در وب سایت

در اين مقاله ميخواهم نحوه اضافه کردن کتابخانه ها و کد نويسي براي استفاده از کيبورد مجازي در وب سايت را آموزش بدهم .

مقدمه :

حتما در وب گردي به سايتهايي با امنيت بالا برخورد کرده ايد که براي قسمت پسورد خود از کيبورد مجازي استفاده ميکنند و يا تمامي درگاه هاي پرداخت آنلاين بانک ها از همچين کي بوردهايي استفاده مي کنند که علت آن فقط يک مورد است ، آنهم ذخيره نشدن کليد هاي فشرده شدن کاربر در نرم افزار هاي جاسوسي يا به اصطلاح کي لاگر ها .
همانطور که ميدانيد کي لاگر نرم افزاري است که صفحه کليد را اسکن ميکند و کليد هاي فشرده شده را در خود ذخيره ميکند و بعد بر اساس سياست خود اين اطلاعات را به مقصدي ارسال ميکند که شخص نويسنده با آن کليد هاي فشرده مي تواند پسوردها و نام کاربري ها را پيدا کند و از حساب کاربر سو استفاده کند .
در اين مقاله من از کيبورد مجازي معروف به نام greywyvern که يک اسکريپت جاوا اسکريپت اوپن سورس و رايگان است استفاده مي کنم .
اين کيبورد از اکثر زبانها زنده دنيا پشتيباني ميکند.
قدم اول :
دانلود فايل هاي مورد نياز . شما بايد اين 3 فايل زير را دانلود نماييد .

1 – فايل جاوا اسکريپت

http://www.greywyvern.com/code/javascript/keyboard.js

2- فايل استايل

http://www.greywyvern.com/code/javascript/keyboard.css

3- فايل عکس کيبورد

http://www.greywyvern.com/code/javascript/keyboard.png
بعد از اين مرحله بايد فايل اول و دوم را به شکل زير به صفحه اچ تي ام ال خود اضافه نماييد.

script  type="text/javascript" src="/code/javascript/keyboard.js"  charset="UTF-8"></script>

  <script type="text/javascript"  src="/include/keyboard.js" charset="UTF-8"></script>
 

در مرحله بعد براي هر تکس باکس که نياز به استفاده از کيبورد هستيد بايد اينگونه عمل کنيد .
مثال :
من ميخواهم انپوت زير داراي کيبورد باشد

  <input type="text"  value="" class="myclass ">
  

همانطور که مشاهده ميکنيد کلاس اين انپوت قبلا تعريف شده بود پس به شکل زير عمل ميکنيم

  < input  type="text" value="" id="userid"  class="keyboardInput myclass "> 

سپس در کد جاوا اسکريپت اين کد را وارد نماييد

  < script  language="JavaScript ">

  var myInput = document.getElementById('userid');

   VKI_attach(myInput);

   < /script >
   

همانطور که مشاهده ميکنيد آي دي انپوت به عنوان ورودي به تابع VKI_attach فرستاده شده است .
با اضافه کردن کد هاي بالا به صفحه اچ تي ام ال و اضافه کردن کلاس keyboardInput  به هرکدام از انپوت هاي صفحه ميتوانيد از کيبورد مجازي براي آن انپوت استفاده کنيد.