On screen keyboard

JavaScript
1

How would be able to write a javascript code so that when i press each letter, the table data is inserted into the text area…so for example if i click on ‘A’, ‘A’ in put into the text box? and also If I click ‘backspace’, the last character is deleted and lastly if i press ‘clear All’ the text area is cleared.

This is my code so far, a couple have been given id names—>

<html>
<head>
<title></title>

<style type=‘text/css’>
.innercol { font-family: “Arial”; font-size: large; background-color: brown;}
</style>

<script type=‘text/javascript’>
</script>

</head>

<body>
<form>

<table onclick=‘keypress();’>
<tr class=‘innercol’ align=“center”>
<td id='L1’width=“36”>Q</td>
<td id='L2’width=“36”>W</td>
<td width=“36”>E</td>
<td width=“36”>R</td>
<td width=“36”>T</td>
<td width=“36”>Y</td>
<td width=“36”>U</td>
<td width=“36”>I</td>
<td width=“36”>O</td>
<td colspan=“50”><input type=‘text’ id=‘search’ size=‘30’ /></td>
</tr>

 &lt;tr class='innercol' align="center"&gt;
  &lt;td width="36"&gt;P&lt;/td&gt;
  &lt;td width="36"&gt;A&lt;/td&gt;
  &lt;td width="36"&gt;S&lt;/td&gt;
  &lt;td width="36"&gt;D&lt;/td&gt;
  &lt;td width="36"&gt;F&lt;/td&gt;
  &lt;td width="36"&gt;G&lt;/td&gt;
  &lt;td width="36"&gt;H&lt;/td&gt;
  &lt;td width="36"&gt;J&lt;/td&gt;
  &lt;td width="36"&gt;K&lt;/td&gt;
  &lt;td colspan="3"&gt;Backspace&lt;/td&gt;
  &lt;td colspan="9"&gt;Clear all&lt;/td&gt;
  &lt;/tr&gt;
  
 &lt;tr class='innercol' align="center"&gt;
  &lt;td width="36"&gt;L&lt;/td&gt;
  &lt;td width="36"&gt;Z&lt;/td&gt;
  &lt;td width="36"&gt;X&lt;/td&gt;
  &lt;td width="36"&gt;C&lt;/td&gt;
  &lt;td width="36"&gt;V&lt;/td&gt;
  &lt;td width="36"&gt;B&lt;/td&gt;
  &lt;td width="36"&gt;N&lt;/td&gt;
  &lt;td width="36"&gt;M&lt;/td&gt;

  &lt;/tr&gt;

</table>

</form>
</body>

</html>

Thanks!

2

I would have put <buttons> in the <td>'s but the way you have done it is fine as well.

  1. you don’t need the onclick in the <table>

  2. the first thing I woudl do is give the <table> an id so it can be accessed easily.

  3. on window.onload() use getElementById() with [URL=“http://www.w3schools.com/DOM/met_document_getelementsbytagname.asp”]getElementsByTagName() to get all the <td>'s containing the keyboard keys. The keys will be in an array

  4. loop through the array in 3) and attach an onclick function to alert() the innerHTML of the key pressed by the user to first make sure the pressed key is being detected correctly.

once this works correctly then you’ve done the bulk of it.

3

what are you planning to use the 2 id’s for?

I don’t see why you need them.