« »

This JavaScript creates a virtual keyboard on web pages for entering password.

Label: virtual keyboard, virtual, keyboard, tool, password

Demo
Enlarge
Reload
New window

Code
Files
HTML
Print

keyboard.gif

Copy All x2

<form name=LOGIN>

<FIELDSET><LEGEND><B>Login</B></LEGEND>
      <TABLE cellSpacing=1>
        <TBODY>
        <TR>
          <TD width="50%"><B>User Name</B></TD>
          <TD width="50%"><INPUT class=forminput maxLength=64 size=25 
            name=UserName></TD></TR>
        <TR>
          <TD width="50%"><B>Password</B></TD>

          <TD width="50%"><INPUT class=forminput type=password size=25 
            name=PassWord></TD></TR><!--Anti KeyLogger -->
        <TR>
          <TD colSpan=2><IMG height=156 alt="" 
            src="keyboard.gif" width=450 useMap=#key> 
            <BR><BR><MAP name=key><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ' '; " 
              shape=RECT coords=119,123,292,146><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '`'; " 
              shape=RECT coords=7,5,32,29><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '1'; " 
              shape=RECT coords=37,4,60,26><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '2'; " 
              shape=RECT coords=65,4,89,28><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '3'; " 
              shape=RECT coords=96,3,117,28><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '4'; " 
              shape=RECT coords=125,5,147,27><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '5'; " 
              shape=RECT coords=155,5,176,28><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '6'; " 
              shape=RECT coords=183,4,205,27><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '7'; " 
              shape=RECT coords=212,5,235,27><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '8'; " 
              shape=RECT coords=241,6,263,28><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '9'; " 
              shape=RECT coords=271,6,292,30><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '0'; " 
              shape=RECT coords=298,4,324,30><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '/'; " 
              shape=RECT coords=334,92,361,118><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '.'; " 
              shape=RECT coords=306,92,331,114><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ','; " 
              shape=RECT coords=276,93,300,115><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'm'; " 
              shape=RECT coords=246,93,271,115><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'n'; " 
              shape=RECT coords=219,91,245,115><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'b'; " 
              shape=RECT coords=190,91,214,115><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'v'; " 
              shape=RECT coords=159,93,186,115><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'c'; " 
              shape=RECT coords=130,95,153,118><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'x'; " 
              shape=RECT coords=101,90,127,117><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'z'; " 
              shape=RECT coords=74,92,96,115><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '`'; " 
              shape=RECT coords=351,61,376,88><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ';'; " 
              shape=RECT coords=321,63,348,86><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'l'; " 
              shape=RECT coords=293,64,315,87><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'k'; " 
              shape=RECT coords=263,63,286,87><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'j'; " 
              shape=RECT coords=234,62,258,85><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'h'; " 
              shape=RECT coords=206,64,229,87><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'g'; " 
              shape=RECT coords=178,64,200,87><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'f'; " 
              shape=RECT coords=148,63,170,86><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'd'; " 
              shape=RECT coords=118,64,142,89><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 's'; " 
              shape=RECT coords=90,64,112,87><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'a'; " 
              shape=RECT coords=60,64,84,86><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ']'; " 
              shape=RECT coords=371,34,397,58><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '['; " 
              shape=RECT coords=343,35,368,59><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'p'; " 
              shape=RECT coords=315,33,339,58><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'o'; " 
              shape=RECT coords=285,35,310,60><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'i'; " 
              shape=RECT coords=255,34,280,57><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'u'; " 
              shape=RECT coords=229,34,251,57><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'y'; " 
              shape=RECT coords=198,35,222,58><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 't'; " 
              shape=RECT coords=169,34,193,57><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'r'; " 
              shape=RECT coords=140,33,165,58><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'e'; " 
              shape=RECT coords=110,35,134,57><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'w'; " 
              shape=RECT coords=82,36,103,57><AREA 
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'q'; " 
              shape=RECT 
        coords=51,35,73,58></MAP>
</form>