Jump to content

Specific Key Press


Recommended Posts

Ok, Is there a way to detect a specific key press?I have thought about it, and I think there are two possibilities:

  1. Detect a keypress in general (i.e. with onkeypress or $(selector).keypress()), and execute a function, which identifies the key pressed, and then executes another function if the key is the intended one.
  2. Have a custom event, so to speak

Link to post
Share on other sites

Well, JavaScript has a mechanism where you could check all the key strokes and check event.keyCode and match it with whatever key/keys you want to do certain things.http://www.quirksmode.org/js/keys.htmlThat link has a little more information.This is the method I typically go with. If you're using JQuery, I think it has it's own methods for determining which key was pressed. The JQuery API documentation on their site will be your best friend for that.

Link to post
Share on other sites

Ok, to make sure I understand it: If I use this code, and type in a, some code will run, but if I type in, say, b, some other code will run:

<script type="text/javascript">function check(){if(event.keyCode=="a"){//execute some code}else{//some other stuff}</script><input type="text" onkeypress="check()"/>

Link to post
Share on other sites

The idea is right, but keyCode is not the actual value on the key. Each key has a code. Try alerting the keyCode in your check function. You'll be able to collect the keyCode values for whatever keys you want.[b[Edit:[/b] I also prefer onkeyup versus onkeypress. I don't know how much of a difference it makes, but it feels better to me.

Edited by ragae
Link to post
Share on other sites

Gah! Debugging time again.HTML page:

<!DOCTYPE HTML><html>  <head>	<title></title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	<script type="text/javascript" src="LoadSVG.js"></script>	<script type="text/javascript" >		var balls = loadSVG("ball2.svg");		function moveLeft(obj)		{			var x = obj.getElementsByTagName("circle")[0].getAttribute("cx");			var z = new Number(x);			z--;			x = z.toString();			obj.getElementsByTagName("circle")[0].setAttribue("cx", x);		}		function moveRight(obj)		{			var x = obj.getElementsByTagName("circle")[0].getAttribute("cx");			var z = new Number(x);			z++;			x = z.toString();			obj.getElementsByTagName("circle")[0].setAttribue("cx", x);		}		function moveDown(obj)		{			var y = obj.getElementsByTagName("circle")[0].getAttribute("cy");			var z = new Number(y);			z--;			y = z.toString();			obj.getElementsByTagName("circle")[0].setAttribue("cy", y);		}		function moveUp(obj)		{			var y = obj.getElementsByTagName("circle")[0].getAttribute("cy");			var z = new Number(y);			z++;			y = z.toString();			obj.getElementsByTagName("circle")[0].setAttribue("cy", y);		}		function move()		{			switch(event.keyCode)			{				case 119: //=w					moveUp(balls);					break;				case 97: //=a					moveLeft(balls);					break;				case 115: //=s					moveDown(balls);					break;				case 100: //=d					moveRight(balls);					break;				default:			}		}	</script>  </head>  <body>	  <iframe id="ball" src="ball2.svg" width="510" height="510" onkeypress="move()"></iframe>  </body></html>

LoadSVG.js:

function loadSVG(name){	var xhttp = new XMLHttpRequest();	xhttp.open("GET", name, true);	xhttp.send();	return xhttp.responseXML;}

Ball2.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect><circle cx="250" cy="50" r="50" stroke="red" stroke-width="1" fill="red"></circle></svg>

So I can see the frame, rectangle, and circle. The code is supposed to move the ball with WASD. But no movement.

Link to post
Share on other sites

Well, I don't know much about SVG, but my first instinct would be to put alerts in your move function and make sure those are launching when they are supposed to.Edit: Also, if balls is a global variable, you don't really need to pass it as an argument to your move functions. I don't think that it's causing a problem, but it's unnecessary =PAnother point: you load the SVG image into your JavaScript and edit it, but there's nothing that I can see that actually commits those changes or updates the iframe. The changes look like they are only done to your JavaScript DOM. Maybe you should update your iframe with your DOM after each change.Again, I don't know much about SVG, but that would be another guess.

Edited by ragae
Link to post
Share on other sites

I suspected as much (about the third point) - I think you're right about the iframe not updating. I just did some research and the iframe object has a reload function. so thankyou!

Link to post
Share on other sites
:) it's still not working...I think now a problem in my XML DOM syntax. Here is my modified code:
<!DOCTYPE HTML><html>  <head>	<title></title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	<script type="text/javascript" src="LoadSVG.js"></script>	<script type="text/javascript" >		var balls = loadSVG("ball2.svg");		function moveLeft()		{			var x = balls.getElementsByTagName("circle")[0].getAttribute("cx");			var z = new Number(x);			z--;			x = z.toString();			balls.getElementsByTagName("circle")[0].setAttribue("cx", x);		}		function moveRight()		{			var x = balls.getElementsByTagName("circle")[0].getAttribute("cx");			var z = new Number(x);			z++;			x = z.toString();			balls.getElementsByTagName("circle")[0].setAttribue("cx", x);		}		function moveDown()		{			var y = balls.getElementsByTagName("circle")[0].getAttribute("cy");			var z = new Number(y);			z--;			y = z.toString();			balls.getElementsByTagName("circle")[0].setAttribue("cy", y);		}		function moveUp()		{			var y = balls.getElementsByTagName("circle")[0].getAttribute("cy");			var z = new Number(y);			z++;			y = z.toString();			balls.getElementsByTagName("circle")[0].setAttribue("cy", y);		}		function move()		{			switch(event.keyCode)			{				case 119:					moveUp();					break;				case 97:					moveLeft();					break;				case 115:					moveDown();					break;				case 100:					moveRight();					break;				default:			}			document.getElementById(ball).reload();		}	</script>  </head>  <body>	  <iframe id="ball" src="ball2.svg" width="510" height="510" onkeypress="move()"></iframe>  </body></html>

Link to post
Share on other sites

Well, it doesn't look like you're saving back to the file. When you change the DOM, it doesn't (as far as I know) automatically save it to the file. You'll probably have to save it back via AJAX, or set the contents of the iframe manually.

Link to post
Share on other sites

Gah. Ok, I need someone who is skilled at SVG to tell me why this isn't working:

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"onkeypress="move()"onload="move()"><script type="text/javascript">	<![CDATA[	var x;	var y;	function move()	{		x = new Number(svg.getElementsByTagName("circle")[0].getAttribute("cx"));		y = new Number (svg.getElementsByTagName("circle")[0].getAttribute("cy"));		switch (event.keyCode)		{			case 119: //=w			y--;			y = y.toString();			svg.getElementsByTagName("circle").setAttribute("cy",y);			break;			case 115: //=s			y++;			y = y.toString();			svg.getElementsByTagName("circle").setAttribute("cy",y);			break;			case 97: //=a			x--;			x = x.toString();			svg.getElementsByTagName("circle").setAttribute("cx",x);			break;			case 100: //=d			x++;			x = x.toString();			svg.getElementsByTagName("circle").setAttribute("cx",x);			break;			default:		}	}	]]></script><rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect><circle cx="250" cy="50" r="50" stroke="red" stroke-width="1" fill="red"></circle></svg>

Link to post
Share on other sites

Going back to the original question, you may find this article on quirksmode helpful, too: http://www.quirksmode.org/js/events_properties.htmlAs stated in the article, you can convert the event code to the actual key with this:

String.fromCharCode(code);

However, it would be better to use the key codes in conditional statements.

Link to post
Share on other sites
I thing fromCharCode would be a good idea, but you can't use switch on a number, so it would be less efficient.
you can definitely use numbers as cases for a switch statement.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...