Random onscreen keyboard display

• • Reply

  13 years ago

  by vinsdome

  vins

  , India

  Joined 13 years ago

  I need to create an on-screen keyboard for entering passwords.

  How can i display a variable key arrangement on the virtual keyboard each time the page is refreshed?

   

  Report abuse
• • Reply

  13 years ago

  by marcio_lins

  Márcio Lins

  João Pessoa, Brazil

  Joined 14 years ago
  Hi, this sample use PHP and JavaScript
  
  1 - use images(created by PHP or paint =] ), 1.jpg, 2.jpg ... 9.jpg, sharp.jpg, asterisk.jpg
  
  2 - create the table for images.
  
  3 - the code, dir "images" have the images =]
  
  <?
  PHP -> index.php
  
  $arr[] = "1.jpg";
  $arr[] = "2.jpg";
  $arr[] = "3.jpg";
  $arr[] = "4.jpg";
  $arr[] = "5.jpg";
  $arr[] = "6.jpg";
  $arr[] = "7.jpg";
  $arr[] = "8.jpg";
  $arr[] = "9.jpg";
  $arr[] = "0.jpg";
  
  srand((float)microtime()*1000000);
  shuffle($arr);
  ?>
  
  <!--- The html markup + PHP  -->
  
  <img src="images/<? echo $arr[0]; ?>" alt="" onClick="writer('<? echo substr($arr[0], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[1]; ?>" alt="" onClick="writer('<? echo substr($arr[1], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[2]; ?>" alt="" onClick="writer('<? echo substr($arr[2], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[3]; ?>" alt="" onClick="writer('<? echo substr($arr[3], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[4]; ?>" alt="" onClick="writer('<? echo substr($arr[4], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[5]; ?>" alt="" onClick="writer('<? echo substr($arr[5], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr; ?>" alt="" onClick="writer('<? echo substr($arr, 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[7]; ?>" alt="" onClick="writer('<? echo substr($arr[7], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr; ?>" alt="" onClick="writer('<? echo substr($arr, 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  <img src="images/<? echo $arr[9]; ?>" alt="" onClick="writer('<? echo substr($arr[9], 0, 1);  ?>')" name="numberOne" width="40" height="40" id="numberOne" />
  
  
  <form action="pages/login.php" method="post" enctype="application/x-www-form-urlencoded" name="formlogin">
  
  <input name="acount" type="text" maxlength="10" /><br />
  
  <input id="sword" width="120px" name="sword" type="password" onKeyPress="dont()" maxlength="6" /><br />
  
  <input name="submit" type="submit" />
  <input type="reset" name="reset" />
  </form>
  
  
  <!--- The javascript code :D  -->
  <script>
      function writer(value){
      document.getElementById("sword").value += value;
      }
    
      function dont(){
      alert("You have use the onscreen KeyBoard display!");
      document.getElementById("sword").value = "";
      }
  </script>
  
  <!--- end of index.php -->
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Report abuse