PDA

View Full Version : detecting keystrokes



Kirl
Jun 10th, 2006, 11:08 PM
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!

coothead
Jun 11th, 2006, 07:00 AM
Hi there Kirl,

does this help...

<!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

Kirl
Jun 11th, 2006, 11:03 AM
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?

coothead
Jun 11th, 2006, 01:33 PM
Hi there Kirl,

How did you find out the keycode, is there some kind of reference list for that?
Well, I use this...

<!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...

<!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

Kirl
Jun 11th, 2006, 02:53 PM
That is awesome man, thanks for the help, exactly what I was looking for!

coothead
Jun 11th, 2006, 03:05 PM
No problem, you're very welcome. ;)

sheetalsh
Aug 11th, 2008, 12:37 PM
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

StunningButDumb
Mar 4th, 2010, 11:12 PM
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!

Philip M
Mar 5th, 2010, 08:50 AM
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.


<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.

StunningButDumb
Mar 6th, 2010, 02:03 AM
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! :thumbsup:

StunningButDumb
Mar 11th, 2010, 03:08 PM
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!!!

Philip M
Mar 11th, 2010, 04:20 PM
<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.

StunningButDumb
Mar 11th, 2010, 04:30 PM
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!

Philip M
Mar 11th, 2010, 04:35 PM
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.

StunningButDumb
Mar 11th, 2010, 05:38 PM
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!

Philip M
Mar 11th, 2010, 06:17 PM
Ah, a bit over my head, but:-



<script type = "text/javascript">

var counter = [];
for (var i =0; i <=25; i++) {
counter[i] = 0; // initialise all 26 array elements which are 0-25
}

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");
counter[key-65] ++; // increment the appropriate counter
}

//if counter[0] == somevalue - say 10 {do something}
//if counter[1] == somevalue - say 6 {do something else}

// and so on for all 26 letters until

//if counter[25] == somevalue - say 5 {do something quite different}

alert (counter); // for testing
return true;
}

document.onkeydown= handleKeyPress

</script>


To change the background color of a table cell:-



<table style="background-color: #9932CC" width="300" height="40" cellspacing="1" cellpadding="5" border="0">
<tr>
<td id = "c1" style="background-color: red">Cell 1</td>
<td id = "c2" style="background-color: blue">Cell 2</td>
<td id = "c3" style="background-color: green">Cell3</td>
</tr>
</table>

<input type = "button" value = "Change TD colors" onclick = "changeTD()">

<script type = "text/javascript">
function changeTD() {
document.getElementById("c1").style.backgroundColor = "green";
document.getElementById("c2").style.backgroundColor = "brown";
document.getElementById("c3").style.backgroundColor = "lightblue";
}
</script>

Combined with the above code this might look like:-


if counter[0] == 10 { // i.e. A key has been pressed 10 times
document.getElementById("c1").style.backgroundColor = "green";
counter[0] = 0; // reset this counter to 0?
}

StunningButDumb
Mar 14th, 2010, 05:58 PM
It worked!!! Thank you!!! I had to make a few changes to get the code do what I wanted it to do (not submit the page until all counters reached their set threshold), but your code gave me all the help I needed. Thank you from the bottom of my heart! (& be sure to see the PM I will send to you in a minute or two)

MrEnder
Mar 15th, 2010, 01:34 AM
i totally dont get it 0.0

quickercarter
Aug 20th, 2013, 12:53 PM
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!

There is one way to get around the keylogger:
Click on Start -> Go to All Programs -> Click on Accessories -> Select Accessibility ->Click on On-Screen Keyboard
Executing the above steps opens a keyboard on the screen so that the user can click whatever letter he/she would like to type. Since a keylogger does not track where and what the user clicks, this helps to get around it in times of urgency. Typing with the onscreen keylogger is a great hassle. The only alternative is to eradicate the keylogger program from the computer completely.

quickercarter
Aug 20th, 2013, 12:56 PM
Is it possible to detect keystrokes logs (http://www.myjad.com/keystrokes-logger.html) 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!

Detecting the user's keystrokes turns out to be a rather specialised branch of event handling.