Jump to content

Specific Key Press


mortalc
 Share

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...