problems with onkeydown in div (IE 6.0)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • euler
    #1

    problems with onkeydown in div (IE 6.0)

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


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

    <table border="1" align="center" >
    <tr >
    <td><div id="a" onkeydown="keyd own()">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>
    Tags: None
    • Martin Honnen
      #2
      Re: problems with onkeydown in div (IE 6.0)



      euler wrote:
      [color=blue]
      > why did the keydown event not fire in this simple example?[/color]

      [color=blue]
      > <script type="text/javascript">
      > function keydown() {
      > alert("keydown" );
      > }
      > </script>
      > </HEAD>
      > <BODY>
      >
      > <table border="1" align="center" >
      > <tr >
      > <td><div id="a" onkeydown="keyd own()">a</div></td>[/color]

      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
      Attention Required! | Cloudflare
      http://JavaScript.FAQTs.com/

        Comment

        • euler
          #3
          Re: problems with onkeydown in div (IE 6.0)

          Martin Honnen <mahotrash@yaho o.de> wrote in message news:<4219e215$ 0$24934$9b4e6d9 3@newsread2.arc or-online.net>...[color=blue]
          > euler wrote:
          >[color=green]
          > > why did the keydown event not fire in this simple example?[/color]
          >
          >[color=green]
          > > <script type="text/javascript">
          > > function keydown() {
          > > alert("keydown" );
          > > }
          > > </script>
          > > </HEAD>
          > > <BODY>
          > >
          > > <table border="1" align="center" >
          > > <tr >
          > > <td><div id="a" onkeydown="keyd own()">a</div></td>[/color]
          >
          > 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?[/color]


          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>ke ydown_div</title>
          <script type="text/javascript">
          function keydown() {
          alert("keydown" );
          }
          function onload() {
          document.getEle mentById('a').f ocus();
          }
          </script>
          </HEAD>
          <body onload="onload( )">

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

            Comment

            • Martin Honnen
              #4
              Re: problems with onkeydown in div (IE 6.0)



              euler wrote:

              [color=blue]
              > In the documentation there is said that onkeydown applies to the
              > div-Element,
              > nothing is said about further conditions like element must have focus.[/color]

              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.a ppendChild(docu ment.createText Node(result));
              document.body.a ppendChild(docu ment.createElem ent('br'));
              }
              </script>
              </head>
              <body>

              <h1>key event handlers on normal element not being controls</h1>

              <p onkeydown="repo rtEvent(event, this);"
              onkeypress="rep ortEvent(event, this);"
              onkeyup="report Event(event, this);">
              Paragraph with no controls.
              </p>

              <p onkeydown="repo rtEvent(event, this);"
              onkeypress="rep ortEvent(event, this);"
              onkeyup="report Event(event, this);">
              Paragraph with input control:
              <input type="text">.
              </p>

              <p onkeydown="repo rtEvent(event, this);"
              onkeypress="rep ortEvent(event, this);"
              onkeyup="report Event(event, this);"
              contentEditable ="true">
              Editable paragraph.
              </p>

              </body>
              </html>


              --

              Martin Honnen
              Attention Required! | Cloudflare
              http://JavaScript.FAQTs.com/

                Comment

                Previous template Next
                Working...