euler wrote:
In the documentation there is said that onkeydown applies to the
div-Element,
nothing is said about further conditions like element must have focus.
But a normal element like a div doesn't take keyboard input, you can use
an onkeydown/press/up event handler on a div or p but of course it will
only fire if the element contains controls taking keyboard input, the
user types in the control and then the key event bubbles up to the
container div or p.
Here is an example using a normal paragraph without controls, a
paragraph with an input control, and an editable paragraph (IE 5.5/6
only), you will see that the key event handlers on the second paragraph
fire when text is entered in the input control:
<html lang="en">
<head>
<title>key event handlers on normal element not being controls</title>
<script type="text/javascript">
function reportEvent (evt, element) {
var result = evt.type + ': ';
result += 'handled at: ' + element.tagName + '; ';
result += 'target/srcElement: ' + (evt.target ? evt.target :
evt.srcElement.tagName) + '; ';
document.body.appendChild(document.createTextNode(result));
document.body.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<h1>key event handlers on normal element not being controls</h1>
<p onkeydown="reportEvent(event, this);"
onkeypress="reportEvent(event, this);"
onkeyup="reportEvent(event, this);">
Paragraph with no controls.
</p>
<p onkeydown="reportEvent(event, this);"
onkeypress="reportEvent(event, this);"
onkeyup="reportEvent(event, this);">
Paragraph with input control:
<input type="text">.
</p>
<p onkeydown="reportEvent(event, this);"
onkeypress="reportEvent(event, this);"
onkeyup="reportEvent(event, this);"
contentEditable="true">
Editable paragraph.
</p>
</body>
</html>
