SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member stix_fs's Avatar
    Join Date
    Nov 2010
    Location
    United Kingdom
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy On screen keyboard

    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>

    <tr class='innercol' align="center">
    <td width="36">P</td>
    <td width="36">A</td>
    <td width="36">S</td>
    <td width="36">D</td>
    <td width="36">F</td>
    <td width="36">G</td>
    <td width="36">H</td>
    <td width="36">J</td>
    <td width="36">K</td>
    <td colspan="3">Backspace</td>
    <td colspan="9">Clear all</td>
    </tr>

    <tr class='innercol' align="center">
    <td width="36">L</td>
    <td width="36">Z</td>
    <td width="36">X</td>
    <td width="36">C</td>
    <td width="36">V</td>
    <td width="36">B</td>
    <td width="36">N</td>
    <td width="36">M</td>

    </tr>

    </table>

    </form>
    </body>

    </html>
    -------------------------------------------------------------------------
    Thanks!

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stix_fs View Post
    This is my code so far, a couple have been given id names
    what are you planning to use the 2 id's for?

    I don't see why you need them.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •