problems with onkeydown in div (IE 6.0)

E

euler

why did the keydown event not fire in this simple example?


<HTML>
<HEAD><title>keydown_div</title>
<script type="text/javascript">
function keydown() {
alert("keydown");
}
</script>
</HEAD>
<BODY>

<table border="1" align="center" >
<tr >
<td><div id="a" onkeydown="keydown()">a</div></td>
<td><div id="b">b</div></td>
</tr><tr>
<td><div id="c">c</div></td>
<td><div id="d">d</div></td>
</tr>
</table>
</BODY>
</HTML>
 
M

Martin Honnen

euler said:
why did the keydown event not fire in this simple example?

<script type="text/javascript">
function keydown() {
alert("keydown");
}
</script>
</HEAD>
<BODY>

<table border="1" align="center" >
<tr >
<td><div id="a" onkeydown="keydown()">a</div></td>

With IE keydown doesn't fire for all keys so unless you tell us which
keys you tried we would need to guess.
And somehow the div would need focus I think to be able to receive key
events.
What happens when you click in the div content and then hit keys, do you
get the key event handler fired then?
 
E

euler

Martin Honnen said:
With IE keydown doesn't fire for all keys so unless you tell us which
keys you tried we would need to guess.
And somehow the div would need focus I think to be able to receive key
events.
What happens when you click in the div content and then hit keys, do you
get the key event handler fired then?


hello Martin,

thank you for answering, but I didn't get it yet.

When using onclick instead of onkeydown, the keyhandler is invoked, I
know.
In the documentation there is said that onkeydown applies to the
div-Element,
nothing is said about further conditions like element must have focus.

Also after setting the focus to the div-Element(hope it's right) the
pressing of e.g. Enter-key doesn't show me the alert of the keydown
handler.

where is the mistake? or is this a bug?



<HTML>
<HEAD><title>keydown_div</title>
<script type="text/javascript">
function keydown() {
alert("keydown");
}
function onload() {
document.getElementById('a').focus();
}
</script>
</HEAD>
<body onload="onload()">

<table border="1" align="center" >
<tr >
<td><div id="a" onkeydown="keydown()">a</div></td>
<td><div id="b">b</div></td>
</tr><tr>
<td><div id="c">c</div></td>
<td><div id="d" onclick="keydown()">d</div></td>
</tr>
</table>
</BODY>
</HTML>
 
M

Martin Honnen

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top