Random Things

Entering accented or other “unusual” characters in a web-form is a recurring problem, which is usually solved by placing a virtual keyboard on the page. I find these annoying as they take up real estate on the page and are not used most of the time. Moreover, I needed more than 1 keyboard (e.g. for entering last name and first name). I came up with a form with the following characteristics:

• At most one visible keyboard
• Keyboard disappears when any textbox is clicked
• As long as keyboard is visible, clicking on it will enter characters into the calling field

The HTML for the form


<form  method="post" action="enter.php">
<table summary="new person">
    <tr>
        <td class="label">Last Name:</td>
        <td class="element"><input id="inpa" onclick="hideallkbs()" name="lastname" type="text" value="" /><br />
<INPUT TYPE=button onclick="hideallkbs();vis('aTable')" VALUE="Keyboard" />
        </td>
    </tr>
    <tr>
        <td class="label">First Name:</td>
        <td class="element"><input id="inpb" onclick="hideallkbs()" name="firstname" type="text" value="" /><br />
<INPUT TYPE=button onclick="hideallkbs();vis('bTable')" VALUE="Keyboard" /></td>
    </tr>
    <tr>
 
        <td></td>
        <td><input name="submit" value="Enter Personal Data" type="submit" />&nbsp;<input name="reset" value="Reset" type="reset" /></td>
</table>
</form>


The functions used in this html are hideblks(), which hides the keyboards and vis(), which makes a particular one visible:


<script language="Javascript" type="text/javascript">
 
function kb(ID,sText) {
  bar = document.getElementById(ID);
  if(bar) {
    bar.value += sText;
  }
}
 
function vis(ID) {
  bar = document.getElementById(ID);
  if(bar) {
    bar.style.display  ='block';
  }
}
 
function hideallkbs() {
  var tables = document.getElementsByTagName("TABLE") ;
  for(var i=0; i<tables.length; i++) {
    if("kbdisplay" == tables[i].className) tables[i].style.display = 'none';
  }
}
</script>


The kb() function will be used below, in defining the action of each clicked key in the keyboard. Before that, we define some CSS:

<STYLE TYPE="text/css">
<!--
.kbdisplay {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  width: 600px;
  font-weight: normal;
  text-transform: none;
}  
td.kbkey {
  border-top:      1px solid #000000;
  border-bottom:    1px solid #000000;
  border-left:    0px solid #000000;
  border-right:    0px solid #000000;
}
 
.abc { width: 30; }
-->
</STYLE>

which should of course be defined in the document’s HEAD (or in a separate linked file).

Finally – here are the keyboards:

<TABLE class="kbdisplay" ID=aTable STYLE="border-collapse:collapse; display:none">
<tr>
<td class="kbkey"><input type="button" class="abc" value="&#192;" onclick="kb('inpa', '\xc0')" /></td>
<td class="kbkey"><input type="button" class="abc" value="&#224;" onclick="kb('inpa', '\xe0')" /></td>
....
<td class="kbkey"><input type="button" class="abc" value="&#253;" onclick="kb('inpa', '\xfd')" /></td>
<td class="kbkey"><input type="button" class="abc" value="&#255;" onclick="kb('inpa', '\xff')" /></td>
</tr>
 
</table>
<TABLE class="kbdisplay" ID=bTable STYLE="border-collapse:collapse; display:none">
<tr>
 
<td class="kbkey"><input type="button" class="abc" value="&#192;" onclick="kb('inpb', '\xc0')" /></td>
<td class="kbkey"><input type="button" class="abc" value="&#224;" onclick="kb('inpb', '\xe0')" /></td>
....
<td class="kbkey"><input type="button" class="abc" value="&#253;" onclick="kb('inpc', '\xfd')" /></td>
<td class="kbkey"><input type="button" class="abc" value="&#255;" onclick="kb('inpc', '\xff')" /></td>
</tr>
 
</table>


A complete example can be seen here, and the correspoding code is here: code