Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > problems with onkeydown in div (IE 6.0)

Reply
Thread Tools

problems with onkeydown in div (IE 6.0)

 
 
euler
Guest
Posts: n/a
 
      02-21-2005
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>
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      02-21-2005


euler wrote:

> 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?

--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
 
euler
Guest
Posts: n/a
 
      02-22-2005
Martin Honnen <(E-Mail Removed)> wrote in message news:<4219e215$0$24934$(E-Mail Removed)-online.net>...
> euler wrote:
>
> > 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?



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>
 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      02-22-2005


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>


--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
onKeyDown in form doesn't work with DIV and innerHTML Iver Erling Årva Javascript 2 06-16-2005 02:09 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
window.onkeydown but not for a specific div or form Jacob Friis Larsen Javascript 5 02-23-2005 02:04 PM



Advertisments