problems with onkeydown in div (IE 6.0)

Discussion in 'Javascript' started by euler, Feb 21, 2005.

  1. euler

    euler Guest

    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>
     
    euler, Feb 21, 2005
    #1
    1. Advertising

  2. 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/
     
    Martin Honnen, Feb 21, 2005
    #2
    1. Advertising

  3. euler

    euler Guest

    Martin Honnen <> wrote in message news:<4219e215$0$24934$-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>
     
    euler, Feb 22, 2005
    #3
  4. 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/
     
    Martin Honnen, Feb 22, 2005
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    756
  2. Jacob Friis Larsen

    window.onkeydown but not for a specific div or form

    Jacob Friis Larsen, Feb 22, 2005, in forum: Javascript
    Replies:
    5
    Views:
    182
    Jacob Friis Larsen
    Feb 23, 2005
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    195
    David Dorward
    Jun 1, 2005
  4. Iver Erling Årva

    onKeyDown in form doesn't work with DIV and innerHTML

    Iver Erling Årva, Jun 16, 2005, in forum: Javascript
    Replies:
    2
    Views:
    165
    Iver Erling Årva
    Jun 16, 2005
  5. mscir
    Replies:
    3
    Views:
    319
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page