Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    243
    Thanks
    14
    Thanked 2 Times in 2 Posts

    detecting keystrokes

    Is it possible to detect keystrokes on the keyboard? I want to detect the arrow keys in particular.

    I'm going through the online reference links in the sticky now, great resource!
    Last edited by Kirl; 06-10-2006 at 10:17 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Kirl,

    does this help...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    h3 {
        text-align:center;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    function getArrows(ev) {
    
      arrows=((ev.which)||(ev.keyCode));
    
    switch(arrows) {
    
     case 37:
       alert('left arrow');
       break;
    
     case 38:
       alert('up arrow');
       break;
    
     case 39:
       alert('right arrow');
       break;
    
     case 40:
       alert('down arrow');
       break;
    
      }
     }
    //-->
    </script>
    
    </head>
    <body  onkeydown="getArrows(event)">
    
    <h3>arrow buttons test</h3>
    
    </body>
    </html>
    
    coothead

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    243
    Thanks
    14
    Thanked 2 Times in 2 Posts
    Awesome, thanks a lot!

    How did you find out the keycode, is there some kind of reference list for that?

    Also, I want to change certain value's by use of the arrow keys, but these value's are only changed internally, how can I make sure these changes are immediately represented in the browser window?

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Kirl,
    How did you find out the keycode, is there some kind of reference list for that?
    Well, I use this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    <!--
    function keyNumber(ev) {
    
        ev.which?alert(ev.which):alert(ev.keyCode);
    }
    //-->
    </script>
    
    </head>
    <body  onkeydown="keyNumber(event)">
    
    <div></div>
    
    </body>
    </html>

    Also, I want to change certain value's by use of the arrow keys, but these value's are only changed
    internally, how can I make sure these changes are immediately represented in the browser window?
    Does this example help...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    * {
        margin:0;
        padding:0;
     }
    #container{
        position:relative;
        width:310px;
        border:3px double #000;
        margin:10px auto;
     }
    h3 {
        text-align:center;
        margin-top:20px;
     }
    #inp0 {
        position:absolute;
        top:10px;
        left:10px;
        width:100px;
     }
    #inp1 {
        width:60px;
        margin:40px 125px 10px 125px;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    
      var count=0;
      var move=10;
    
    function getArrows(ev) {
    
      df=document.forms[0];
      arrows=((ev.which)||(ev.keyCode));
    
    switch(arrows) {
    
     case 37:
    if(move>10) {
       move-=5;
     }
       df[0].style.left=move+'px';
       df[1].value=move+'px left';
       break;
    
     case 38:
       count++;
       df[0].value=count;
       break;
    
     case 39:
    if(move<200) {
       move+=5;
     }
       df[0].style.left=move+'px';
       df[1].value=move+'px left';
       break;
    
     case 40:
       count--;
       df[0].value=count;
       break;
      }
     }
    //-->
    </script>
    
    </head>
    <body  onkeydown="getArrows(event)">
    
    <h3>arrow buttons test</h3>
    
    <form action="#">
    <div id="container">
    
    <input id="inp0" type="text" value="0"/>
    <input id="inp1" type="text" value="10px left"/>
    
    </div>
    </form>
    
    </body>
    </html>
    coothead

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    243
    Thanks
    14
    Thanked 2 Times in 2 Posts
    That is awesome man, thanks for the help, exactly what I was looking for!

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're very welcome.

  • #7
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    it is very fantastic code.

    I have one problem when I am trying to run this code on a click of Image in asp.net 2.0 and using firefox and mozilla, then it is not working.

    However it is working in IE.

    Please help coolthead.

    Thanks,
    SS:confused

  • #8
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Detecting when keystrokes reach a preset number

    I want to use JavaScript to detect the number of times a key (for example, the A key) is pressed. Once it reaches a preset number (say 10 for this example), it will trigger two events:

    1. Change the background color of a cell in a table from white to black.
    2. A split-second (e.g., .01 second) later, submit the form on this page.

    I can't have the user hit the ENTER key to submit the form, so the JavaScript script will need to do this.

    Thank you very much for your help!

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by StunningButDumb View Post
    I want to use JavaScript to detect the number of times a key (for example, the A key) is pressed. Once it reaches a preset number (say 10 for this example), it will trigger two events:

    1. Change the background color of a cell in a table from white to black.
    2. A split-second (e.g., .01 second) later, submit the form on this page.

    I can't have the user hit the ENTER key to submit the form, so the JavaScript script will need to do this.

    Thank you very much for your help!
    Please do not hijack and old thread which has only marginal relevance to your question - start a new one of your own.

    What is the point of this? It is completely arbitrary. If you want the user to submit a form, use a submit button in the normal way. And what do you mean by for example, the A key? Is it always the A key or does that change in some way?

    Here is some code but you need to re-think what you are trying to do.

    Code:
    <script type = "text/javascript">
    
    var keyCount = 0;
    document.onkeydown = function(ev) {	
    var key;
    ev = ev || event;
    key = ev.keyCode;
    
    if (key == 65) {
    keyCount ++;
    alert ("You pressed the a key " + keyCount + " times");
    }
    if (keyCount == 10) {
    // do whatever is wanted
    }
    
    }
    </script>

    Quizmaster: In written communication, which country's name is an acronym for "I trust and love you"?
    Contestant: Germany.
    Last edited by Philip M; 03-05-2010 at 12:57 PM. Reason: typo

  • Users who have thanked Philip M for this post:

    StunningButDumb (03-06-2010)

  • #10
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up Oops! and Thanks!

    I apologize for hijacking that thread. As a newbie, I didn't even know what hijacking is! It seemed relevant, so I thought (incorrectly, it turns out) that would be the best place to post my questions.

    Your code proved to be a great starting point. I added some functions to it to accomplish the rest of what I needed to do, so THANK YOU very much!

  • #11
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    How could I add to that code so it could trigger events for other keys? It is now monitoring the "a" key. Is it possible to monitor that as before but also monitor the "z" key? Is there any limit on the number of keys that can be simultaneously monitored? Thank you!!!

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    <script type = "text/javascript">   
    
    function handleKeyPress(evt) {   
    var key = (window.event)?event.keyCode:evt.which;   
    which = String.fromCharCode(key).toUpperCase();
    if (key>=65 && key<=90) {   // A-Z
    alert ("You pressed the " + which + " key");  
    }
    if (key == 65) { 
    //do this
    }
    if (key == 66) {
    //do that
    }
    if (key == 90) {
    //do something else
    }
    // or prefer to use a switch statement
    return true;   
    }   
    document.onkeydown= handleKeyPress  
     
    </script>
    If you want to monitor how many times each individual key is pressed, you will need to set up an array to hold the counts. As I said before, what is the purpose of this?

    James (007) Bond: (to Bibi) You get your clothes back on, and I'll buy you an ice cream.
    Last edited by Philip M; 03-11-2010 at 03:30 PM.

  • #13
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    If you want to monitor how many times each key is pressed, you will need to set up an array to hold the counts.
    Will you please show me how to do that? I apologize for being so needy, but I just don't "get" JavaScript!

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Not unless you explain the point of this. It is strange that people who have no knowledege of Javascript always seem to want to do what appear to be bizarre and pointless things.

  • #15
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Not unless you explain the point of this. It is strange that people who have no knowledege of Javascript always seem to want to do what appear to be bizarre and pointless things.
    The point of all this is to use a PC as a microcontroller that can turn various motors on or off based on information stored in a database. I am using PHP/MySQL for most of the script, but I also need JavaScript to change the background color of a table cell after a preset number of keystrokes is reached. I am essentially hacking a PC keyboard and, instead of a user pressing a key, a sensor will trigger a contact closure for a given key. To the computer, this looks just like a keystroke. Thanks to your help (again, THANK YOU!), I now am able to turn a specific motor on or off. Basically, PHP/MySQL can turn a specific motor on by changing the color of a table cell, over which is a sensor to detect that color. The motor runs until it receives an off signal after it makes a shaft turn a preset number of revolutions (preset via PHP), based on another sensor to track that. This latter sensor is the one I use to trigger a "keystroke" so JavaScript knows when the motor should be turned off.

    So far, so good -- everything works just fine for one motor to be controlled at any given time. However, I would like to control several motors at a time. Turning them on is no problem (by using PHP/MySQL to preset the color of cells in a table, over which are photosensors), but I need JavaScript to respond once SHAFT 1 revolved 10 times (for example), SHAFT 2 six times, SHAFT 3 five times, etc.

    BTW, if you want me to pay for a solution to this problem (of how to use JavaScript to trigger changes in the background color of multiple table cells after a threshold number of "keystrokes" is reached for a particular cell), I will. I am definitely not rich, but I am grateful!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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