PDA

View Full Version : On screen buttons, acting like a keyboard

details
07-12-2002, 11:45 PM
I have several buttons made to reflect an onscreen keyboard. I also have several input forms above them. I want the user to click on any of the buttons and have them fill in the forms with out the keyboard. Only using the mouse or a touch screen. Is this possible with javascript.
joh6nn
07-13-2002, 12:52 AM
yes. but it would probably end up being more code than its worth.
Soldier Bob
07-13-2002, 05:13 AM
you could even take a photograph of the keyboard and use an image map if you wanted to....

-S. Bob
neil.c
07-13-2002, 09:10 PM
here's a rough idea. it allows the user to press the buttons and their value will be added to the current text box. if they click another text box, that will be set as 'vCurrent' and will be typed into. Use your existing buttons, just stick onclick="fType(insert key here)" into their tags. also use your existing text boxes, just make sure you give them names of field1, field2 etc. or the selection thing won't work.

you will need a backspace button and it might be nice to be able to insert text partway through a field. i haven't done this cos i dont know exactly what you need.


<HTML>
<HEAD>
<TITLE>typing thing</TITLE>
<SCRIPT language=javascript>
<!--
var vCurrent = 1
function fType(keyPressed){ //adds the value of the pressed button to the field.
eval("document.frmStuff.txtField" + vCurrent + ".value += keyPressed")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name=frmStuff>
<P><INPUT type=text name=txtField1 size=50 onclick="vCurrent = 1"></P>
<P><INPUT type=text name=txtField2 size=50 onclick="vCurrent = 2"></P>
<P><INPUT type=text name=txtField3 size=50 onclick="vCurrent = 3"></P>
<P>
<INPUT type=button name=btnKeyQ value="Q" onclick="fType('Q')">
<INPUT type=button name=btnKeyW value="W" onclick="fType('W')">
<INPUT type=button name=btnKeyE value="E" onclick="fType('E')">
<INPUT type=button name=btnKeyR value="R" onclick="fType('R')">
<INPUT type=button name=btnKeyT value="T" onclick="fType('T')">
<INPUT type=button name=btnKeyY value="Y" onclick="fType('Y')">
<!--etc.-->
</P>
</FORM>
</BODY>
</HTML>

this worked when i tested it. any good?:thumbsup:

EDIT: 14/07/02 11:19 AM BST: inserted single quotes into script
details
07-13-2002, 10:43 PM
I am getting an undefined error for each letter
such as Error: "T" is undefined??
D2K2
07-13-2002, 10:48 PM
Did you include singlequote marks?
If u dont it thinks u've set T as a variable, and goes hunting for it.

EG:
ftype('T')
details
07-13-2002, 11:02 PM
I am going to need a backspace and a tab button to change fields. :thumbsup:
joh6nn
07-13-2002, 11:17 PM
function backspace() {
document.theForm.theTextBox.value = document.theForm.theTextBox.value.slice(0, document.theForm.theTextBox.value.length -2);
}

tab.where = 0;
function tab(posinega) {
document.theForm.elements[tab.where + posinega].focus();
}

tab is written the way it is, so that you can make it tab forwards or backwards.

tab(1); // tabs to the next space;
tab(-1); // tabs backwards;

keep in mind that if the person has a mouse, they really don't need the tab.

also, the backspace function is sad, and there's nothing that can be done about it, because there's no good cross browser way to find out where the cursor is in a string. also, that means that ability to insert text, copy or cut text, etc, will all also be either really really hard to write, or simply impossible. i'm not sure which.
details
07-13-2002, 11:21 PM
I am messing around with a touch screen. I will just create a reset button because I am only asking for name and e-mail.
details
07-13-2002, 11:26 PM
I need the tab to tab to the next input box. It does it, but it still forces everthing into the first input txtField1
joh6nn
07-13-2002, 11:42 PM
how do you mean?
details
07-13-2002, 11:47 PM
At this link is where it is at. I cannot get the tab to work properly
http://www.trhilco.com/kb/keyboard.html

<HTML>
<HEAD>
<TITLE>typing thing</TITLE>
<SCRIPT language=javascript>
<!--
var vCurrent = 1
function fType(keyPressed){ //adds the value of the pressed button to the field.
eval("document.frmStuff.txtField" + vCurrent + ".value += keyPressed")
}

function backspace() {
document.frmStuff.theTextBox.value = document.frmStuff.theTextBox.value.slice(0, document.frmStuff.theTextBox.value.length -2);
}

tab.where = 0;
function tab(posinega) {
document.frmStuff.elements[tab.where + posinega].focus();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name=frmStuff>
<P><INPUT type=text name=txtField1 size=50 onclick="vCurrent=1"></P>
<P><INPUT type=text name=txtField2 size=50 onclick="vCurrent=2"></P>
<P><INPUT type=text name=txtField3 size=50 onclick="vCurrent=3"></P>
<P>
<INPUT type=button name=btnKeyQ value="Q" onclick="fType('Q')">
<INPUT type=button name=btnKeyW value="W" onclick="fType('W')">
<INPUT type=button name=btnKeyE value="E" onclick="fType('E')">
<INPUT type=button name=btnKeyR value="R" onclick="fType('R')">
<INPUT type=button name=btnKeyT value="T" onclick="fType('T')">
<INPUT type=button name=btnKeyY value="Y" onclick="fType('Y')"><BR><BR>
<INPUT type=button name=btnKeyTab value="Tab" onclick="tab(1)">

<!--etc.-->
</P>
</FORM>
</BODY>
</HTML>
joh6nn
07-14-2002, 12:03 AM
made a typo when i wrote the function. this should work:

tab.where = 0;
function tab(posinega) {
document.frmStuff.elements[tab.where += posinega].focus();
}
details
07-14-2002, 12:14 AM
Same thing:confused:
Could it be on this line

<INPUT type=button name=btnKeyTab value="Tab" onclick="tab(1)">???
joh6nn
07-14-2002, 12:21 AM
wow, i'm out of it today or something.


try this:

tab.where = 0;
function tab(posinega) {
tab.where += posinega;
document.frmStuff.elements[tab.where].focus();
}
details
07-14-2002, 12:27 AM
Ok, it tabs through now. . . but once I fill in a few letters and tab to the second input, when I try to populate it with a letter it focus back to the first form.
neil.c
07-14-2002, 11:17 AM
just using Focus won't work. as soon as you click a button, the focus goes to that button. in my code, the 'focus' is not literally the focus of the form, it is a variable, called vCurrent. to change the 'focus', you have to change this variable, my code does this using the onClick event handler. it seems that the focus() doesnt fire this handler. i'd suggest this:

function fTabToNext()
{
vCurrent++
if (vCurrent > /*enter number of fields*/)
{
vCurrent = 1
}
}

ok?
joh6nn
07-14-2002, 01:20 PM
yeah, looks like you'll have to do it neil's way.
details
07-14-2002, 04:27 PM
function backspace() {
document.frmStuff.txtField" + vCurrent + ".value = document.frmStuff.txtField" + vCurrent + ".value.slice(0, document.frmStuff.txtField" + vCurrent + ".value.length -2);
}

This backspace gives me an error? What did I miss
neil.c
07-14-2002, 09:02 PM
you need an eval() in there to deal with the strings in the expression. here i'm using a variable to refer to the textbox - i think this should work.

function backspace()
{
var theTextBox = eval("document.frmStuff.txtField" + vCurrent
theTextBox.value = theTextBox.value.slice(0, theTextBox.value.length - 2)
}

it might be easier to make your textboxes into an array - so you can refer to them as textbox[1], textbox[2] etc.. this would save doing eval() all the time. i don't know how easy this is though.
details
07-14-2002, 09:20 PM
Would a space bar be writen like this then or complete different since we are going foward now?

function spacebar()
{
var theTextBox = eval("document.frmStuff.txtField" + vCurrent)
theTextBox.value = theTextBox.value.slice(0, theTextBox.value.length + 1)
}
neil.c
07-14-2002, 09:26 PM
i don't think so. slice() returns a section of a string, i think it returns an error if you go beyond the length. a space bar would be like this:

function spacebar()
{
var theTextBox = eval("document.frmStuff.txtField" + vCurrent)
theTextBox.value += " "
}

just add a space to the end.
ghandi
05-23-2006, 04:59 AM
I have collected most of what is needed for a Virtual Keyboard from this Forum.

However, I still need a script(s) to make the 'Contol Keys' (Shift, Caps, Alt, AltGr, Ctrl.) operate.

Any ideas what can be done?

Here is my CSS Virtual Keyboard so far:

<HTML>
<HEAD>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>Pure CSS Keyboard</title>

<style type="text/css">

/* button styles */
input.keycap {font-size:10px; font-family:Arial,sans-serif; font-weight:bold; width:20px; height:20px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#ffEEEEEE',EndColorS tr='#ff888888');
border-width:0px}

border-top-style:outset;
border-top-width:0px;
border-bottom-style:outset;
border-bottom-width:0px;
border-left-style:outset;
border-left-width:0px;
border-right-style:outset;
border-right-width:0px; }

</style>

<script>

fN = 0; //form name or number; 0=first form, alternatively use form name
eN = "txt"; //text box name
function addChar(cH) { document.forms[fN].elements[eN].value += cH; }
function backSpace() { var currVal = document.forms[fN].elements[eN].value; document.forms[fN].elements[eN].value = currVal.substr(0,(currVal.length-1)); }
function getKeyFromFile(src){ var splits = src.split('/'); temp = splits[splits.length - 1]; temp = temp.replace('.gif',''); temp = temp.replace('kb_',''); return temp; }

</script>

<script>

function CheckTab(el) { // Run only in IE // and if tab key is pressed // and if the control key is pressed
if ((document.all) && (9==event.keyCode) && (event.ctrlKey)) { // Cache the selection
el.selection=document.selection.createRange(); setTimeout("ProcessTab('" + el.id + "')",0) } }

function ProcessTab(id) { // Insert tab character in place of cached selection
document.all[id].selection.text=String.fromCharCode(9) // Set the focus
document.all[id].focus() }

</script>

</head>

<body style="text-align: center">

<p align="center"><b><font size="5">
PURE CSS KEYBOARD LAYOUT</font></b></p>
<hr width="500"><hr>
<p align="center"><font size="4"><b>PURE CSS</b></font><b><font size="4"> KEYBOARD</font></b></p>


<form>
<p align="center">


<textarea name="txt" id=mytabdemo onkeydown="CheckTab(this)" cols="40" rows="10" ></textarea>

<br>
<br>
&nbsp;<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"> </p>
<div align="center">
<table border="0" id="table12442" cellspacing="0" cellpadding="0" style="position: relative">
<tr>
<td align="center"><div align="center">




<TABLE height=20 cellSpacing=0.5px width=320 border=1 PADDING="0" id="table12443" bgcolor="#A0A0A0" style="border-collapse: collapse; border-style: outset; position:relative; z-index:1" cellpadding="1.5px">
<TBODY>
<TR>
<TD>

<input type="button" value="`" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="1" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="2" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="3" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="4" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="5" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="6" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="7" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="8" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="9" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="0" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="-" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="=" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="BK-SP" onclick="backSpace()" class="keycap" style="width: 40; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD></TR></TBODY></TABLE><div align="center">




<div align="center">




<TABLE height=20 cellSpacing=0.5px width=320 border=1 PADDING="0" id="table12444" bgcolor="#999999" style="border-collapse: collapse; border-style: outset; position:relative; z-index:1" cellpadding="1.5px">
<TBODY>
<TR>
<TD>

<input type="button" value="TAB" onclick="addChar(' ')" class="keycap" style="width: 30; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="Q" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="W" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="E" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="R" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="T" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="Y" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="U" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="I" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="O" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="P" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="[" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="]" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-11; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="" onclick="addChar('\r\n')" class="keycap" style="width: 30; height: 42; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px"></TD></TR></TBODY></TABLE>




<TABLE height=20 cellSpacing=0.5px width=320 border=1 PADDING="0" id="table12445" bgcolor="#A0A0A0" style="border-collapse: collapse; border-style: outset; position:relative; z-index:2; " cellpadding="1.5px">
<TBODY>
<TR>
<TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 46; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="CAP"></TD><TD>

<input type="button" value="A" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="S" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="D" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="F" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="G" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="H" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="J" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="K" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="L" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value=";" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="'" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="\" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; position:relative; top:-23; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<font size="1">
<img border="0" src="Keyboard%20Dev%20II/Keyboard%20w-CSS/images/None.jpg" style="width: 14px; height:20px"></font></TD></TR></TBODY></TABLE>




<TABLE height=20 cellSpacing=0.5px width=320 border=1 PADDING="0" id="table12446" bgcolor="#808080" style="border-collapse: collapse; border-style: outset; position:relative; top:-25; z-index:2" cellpadding="1.5px">
<TBODY>
<TR>
<TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 53; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="SHIFT"></TD><TD>

<input type="button" value="Z" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="X" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="C" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="V" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="B" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="N" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="M" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="," onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" value="." onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD>
<td>

<input type="button" value="/" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></td>
<TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 53; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="SHIFT"></TD></TR></TBODY></TABLE>




<TABLE height=20 cellSpacing=0.5px width=320 border=1 PADDING="0" id="table12447" bgcolor="#808080" style="border-collapse: collapse; border-style: outset; position:relative; top:-26.5; z-index:2" cellpadding="1.5px">
<TBODY>
<TR>
<TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 42; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="CTRL"></TD><TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 42; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="ALT"></TD><TD>

<input type="button" value="Space" onclick="addChar(' ')" class="keycap" style="width: 159; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></TD><TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 42; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="ALT GR"></TD><TD>

<input type="button" onclick="typing(this, 51)" class="keycap" style="width: 42; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" value="CTRL"></TD></TR></TBODY></TABLE></div></div></div>
</td>
</tr>
</table>
</div>

<p align="center">&nbsp;</p>

</form>

<div align="center">
NOTES:</div>
<div align="center">
Unicode Style for line-code [Exp.: &amp;#24510] of Keycaps,<br>
Substitute: &amp;#_ _ _ _ _ for the U+_ _ _ _ _ prefix<br>
<br>
User can also use (Tab + Ctrl Key) to 'tab' in the &quot;TextArea&quot;<br>
Virtual Tab Key is set to tab (tab-space was copied from MS Word) spaces
properly<br>
&nbsp;</div>
<hr><hr width="500">
<p align="center"><b>END</b></p>
<p align="center">&nbsp;</p>

</body>

</html>

--