Random Things » javascript http://www.edna.narrabilis.com Sat, 18 Jul 2009 15:07:36 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Tutorial: Multiple Keyboards for Accented Characters http://www.edna.narrabilis.com/2006/03/14/multiple-keyboards-for-accented-characters/ http://www.edna.narrabilis.com/2006/03/14/multiple-keyboards-for-accented-characters/#comments Tue, 14 Mar 2006 15:39:45 +0000 ednawig http://www.edna.narrabilis.com/2006/03/14/multiple-keyboards-for-accented-characters/ 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

]]> http://www.edna.narrabilis.com/2006/03/14/multiple-keyboards-for-accented-characters/feed/ 0 doubleclick a radio button to remove selection http://www.edna.narrabilis.com/2006/03/09/doubleclick-a-radio-button-to-remove-selection/ http://www.edna.narrabilis.com/2006/03/09/doubleclick-a-radio-button-to-remove-selection/#comments Thu, 09 Mar 2006 15:26:54 +0000 ednawig http://www.edna.narrabilis.com/2006/03/09/doubleclick-a-radio-button-to-remove-selection/ We needed to set up a group of radio buttons so that when any of them is doubleclicked any selection in the group is removed. . The following javascript snippet sets up the function kp() which removes all selections upon a doubleclick:




<script type="text/javascript">
 
function kp() {
    var rb = document.getElementsByName('rb');
    for( var i=0; i < rb.length; i++) {
         rb[i].checked = false;
    }
}
 

And the corresponding html which calls kp():

<input name="rb" value="0" type="radio" ondblclick="kp()"/>No
<input name="rb" value="1" type="radio" ondblclick="kp()"/>Yes
<input name="rb" value="3" type="radio" ondblclick="kp()"/>Maybe
<input name="rb" value="4" type="radio" ondblclick="kp()"/>Rather Not

]]> http://www.edna.narrabilis.com/2006/03/09/doubleclick-a-radio-button-to-remove-selection/feed/ 0