У меня не много опыта по использованию клавишных событий, но кое-что скажу.
Нужно повесить свои обработчики на события keydown и keyup.
Вот статья в учебнике:
http://learn.javascript.ru/keyboard-events
Вот спецификация W3C для справки (на английском языке):
http://www.w3.org/TR/DOM-Level-3-Eve...keyboardevents
Вот мой простой пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title></title>
</head>
<body style="width:500px; height:500px; border:solid 5px">
<div id="square" style="background-color:red; position:relative; width:16px; height:16px"/>
<script type="text/javascript">
var x=0, y=0, keys=[false, false, false, false];
var square=document.getElementById("square");
document.body.addEventListener("keydown", function(event){
var key=event.keyCode;
if (key>=37&&key<=40)
keys[key-37]=true;
});
document.body.addEventListener("keyup", function(event){
var key=event.keyCode;
if (key>=37&&key<=40)
keys[key-37]=false;
});
setInterval(function(){
x+=3*(keys[2]-keys[0]);
y+=3*(keys[3]-keys[1]);
if (x<0)
x=0;
else if (x>484)
x=484;
if (y<0)
y=0;
else if (y>484)
y=484;
square.style.left=x+"px";
square.style.top=y+"px";
}, 100);
</script>
</body>
</html>
хотя я не уверен в его оптимальности.
Здесь использовалось свойство keyCode объекта KeyboardEvent, хотя оно является устаревшим, а новое свойство key ещё не поддерживаестя многими браузерами.