Foros del Web - Ver Mensaje Individual

zerokilled · #12 (**permalink**) 13/11/2009, 14:21

a continuacion un script que recien realice porque necesitaba ver unas diferencias que no tenia en claro. lo puedes usar para identificar el valor numerico que representa una tecla segun el evento.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
function key(evt, id) {
var evt = evt || event;
var inputs = document.getElementById(id).getElementsByTagName("input");
inputs[0].value = evt.keyCode;
inputs[1].value = String.fromCharCode(evt.keyCode);
inputs[2].value = evt.which;
inputs[3].value = String.fromCharCode(evt.which);
}

document.onkeypress = function(evt){
key(evt, "press");
}

document.onkeyup = function(evt){
key(evt, "up");
}

document.onkeydown = function(evt){
key(evt, "down");
}
</script>
<style type='text/css'>
body{
font-family:georgia;
background:#111 url(http://img404.imageshack.us/img404/3279/firebug.jpg) no-repeat -2em 21em;
color:#fff;
margin:1em;
margin-left:4em;
}

p{
text-align:right;
width:40em;
}

.section{
border-top:1px dotted #333;
padding-top:2em;
}

span{
display:inline-block;
width:6.65em;
text-align:center;
}

input{
width:8em;	
text-align:center;
background:transparent;
border:0;
}

textarea{
width:31.5em;
height:4em;
padding:.25em;
background:#333;
border:1px solid #666;
}

input, textarea{
color:#fff;
font-family:monospace;
}

h1{
font-size:1.75em;
border-bottom:1px solid #333;
}

h2{
float:left;
font-weight:normal;
padding-top:1.75em;
}
</style>
</head>

<body>
<h1>Keys</h1>
<h2>onkey-</h2>
<p class="header"><span>keyCode</span> <span>char key</span> <span>which</span> <span>char which</span></p>

<p id="down">down: <input /> <input /> <input /> <input /></p>
<p id="press">press: <input /> <input /> <input /> <input /></p>
<p id="up">up: <input /> <input /> <input /> <input /></p>
<h2>Type in box</h2>

<p class="section"><textarea></textarea></p>
</body></html>