Detecting control key press and release options in javascript

JavaScript
1

hi everyone,

How to detect whether a control key is pressed and released from the keyboard?
“onkeydown” iam invoking the following function…and updating the flag “cntrl_key_pressed” to true and false accordingly.

onkeydown=“detectCTRLKey(event)”

function detectCTRLKey(e)
{
//alert(e);
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if(code==17)
cntrl_key_pressed=true;
}

how to identify that the control key is released from the keyboard, so that i can reset the flag (cntrl_key_pressed) to false.?

need help regarding…
thanks

2

here is the sample code…for verification

<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

</head>

<script language=“javascript”>

var cntrl_key_pressed=false;
function detectCTRLKey(e)
{        
    //alert(e);
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if(code==17)
	{
		cntrl_key_pressed=true;
		alert("keydown event control key value :: "+cntrl_key_pressed);
	}
}

function resetCTRLKey(e)
{
   //var evt = e || window.event;
   //alert(evt.type);
   //alert('keyCode is ' + evt.keyCode);
   //alert('charCode is ' + evt.charCode);
   cntrl_key_pressed=false;
   alert("keyup event control key value :: "+cntrl_key_pressed);
}

</script>

<body>

<div id=“treeBox” style=“position:absolute; left:13; top:0;width:370;height:290;background:#CCCCCC” onkeyup=“resetCTRLKey(event)” onkeydown=“detectCTRLKey(event)” border=“1”>
</div>

</body>
</html>

Note: Somehow the keyup event is getting suppressed…

3

abhishek.c has an alternative that would work, although the detectCTRLKey function shold actually be called on mouseup. I’m not sure how much the cntrl_key_pressed is needed, as all the scripting can be done directly in the if(code==17) conditional.

The other alternative would be to trap the “ctrlKey” event property. It avoids having to use “keyCode” or “which”. There is a keydown and a keyup fork, as ctrlKey only gets triggered on keydown. Check out the source code below:
<input type=“text” id=“zorro” onkeydown=“checkKey(event);” onkeyup=“checkKey(event);” />
<script>
var theKeyPressed = null;
function checkKey(e) {
if(e.type == ‘keydown’) {
theKeyPressed = e.ctrlKey;
}
if(e.type == ‘keyup’ && theKeyPressed == true) {
return alert(‘the CTRL key has been released’);
}
}
</script>

4

thanks for the reply…

Also i have to check whether delete key is pressed or not…

5

maybe this code helps you:

<head>
    <script>
        function OnKeyDown (event){
            var keyCode = event.which;
            if (keyCode == undefined) {
                keyCode = event.keyCode;
            }

			var down = document.getElementById ("down");
            down.innerHTML += keyCode + ", ";
        }

        function OnKeyUp (event){
            var keyCode = event.which;
            if (keyCode == undefined) {
                keyCode = event.keyCode;
            }

			var up = document.getElementById ("up");
            up.innerHTML += keyCode + ", ";
        }</script>
</head>
<body>
    <input size="40" value="Press or release a key in this field!" onkeydown="OnKeyDown (event);" onkeyup="OnKeyUp (event);"/>
	<div id="down"></div>
	<div id="up"></div>
</body>
6

In this case you are indeed better off using keycodes to detect and process multiple key characters, as follows:
<input type=“text” id=“zorro” onkeyup=“checkKey(event);” />
<script>
function checkKey(e) {
var theKeyPressed = null;
var reaction = false;

if(window.event) {
theKeyPressed = e.keyCode;
}
if(e.which) {
theKeyPressed = e.which;
}

switch(theKeyPressed) {
case 17: theKeyPressed = ‘CTRL’;
reaction = true;break
case 46: theKeyPressed = ‘DEL’;
reaction = true;break
case 8: theKeyPressed = ‘BACKSPACE’;
reaction = true;
}

if(reaction == true) {
alert(‘The ‘+ theKeyPressed +’ key was released’);
}
}
</script>

The exact same source code can be put on keydown and keypress…