www.webdeveloper.com
Results 1 to 2 of 2

Thread: Difference between onkeydown and onkeypress

  1. #1
    Join Date
    Jul 2010
    Posts
    11

    Difference between onkeydown and onkeypress

    I made the following code to test the difference between onkeydown and onkeypress. I'd expect that if I keep some key pressed, onkeydown will be just triggered once, while onkeypress will be triggered continuously (as indicated at http://www.bloggingdeveloper.com/pos...ey-Events.aspx).

    However, the reality is that onkeydown is also triggered continously.

    I'm wondering why there is a difference between the demo at the above URL and my example. Thanks!

    <html>
    <body>
    <p>
    Mouse events are valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
    </p>
    <p>
    Keyboard events valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
    </p>

    <button onkeydown="changeStatus('onkeydown');">
    onkeydown
    </button>
    <button onkeyup="changeStatus('onkeyup');">
    onkeyup
    </button>
    <button onkeypress="changeStatus('onkeypress');">
    onkeypress
    </button>

    <div>onkeydown: <span id="onkeydown">0</span></div>
    <div>onkeyup: <span id="onkeyup">0</span></div>
    <div>onkeypress: <span id="onkeypress">0</span></div>

    <script>
    changeStatus=function() {
    var count={
    onkeydown:0
    , onkeyup:0
    , onkeypress:0
    };
    return function(s) {
    ++count[s];
    document.getElementById(s).innerHTML=count[s];
    }
    }();
    </script>

    </body>
    </html>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    The demo attach the three events at the same input with this line of code.
    Code:
    <input id="field1" type="text" maxlength="1" size="5" onkeydown="setLabel(1, 'Down');return disableEnterKey(event);"
        onkeyup="setLabel(1, 'Up');return disableEnterKey(event);" onkeypress="countPresses();return disableEnterKey(event);"/>
    Your example attach three different functions to each button and set the initials counts with a closure. Then it's only after a click on a button (when this button has the focus), that the attached function increment the corresponding count... This events do not fire after a click somewhere else on the page !
    You can retrieve, or get closer to (*), the demo with this three lines at the end at your script
    Code:
    window.document.onkeydown=function(){changeStatus('onkeydown')}
    window.document.onkeyup=function(){changeStatus('onkeyup')}
    window.document.onkeypress=function(){changeStatus('onkeypress')}
    (*) There is always a difference with the demo (keydown increases like keypress). It is enough to delete the maxlength="1" from the field1 input and to comment the document.getElementById('field1').value = ""; in the function setLabel to retrieve the same behaviour.

    Finally this demonstration is misleading and lets understand (although it is not written) that the onkeydown event fire only once while it is false !
    Last edited by 007Julien; 01-02-2012 at 07:35 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles