Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    onkeypress help?

    I'm trying to convert a onkeypress function to pure javascript instead of having to call it in my body tag. For example how would I convert <body onkeypress="return Hello(event)">? I tried document.onkeypress = function() {return Hello(event);}, but that didn't work. Not sure what I'm missing here?

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    document.body.onkeypress
    oops, neverMind
    Last edited by DaveyErwin; 06-23-2012 at 04:36 PM.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    897
    Thanks
    0
    Thanked 118 Times in 117 Posts
    onkeypress triggers when a key is pressd and thereafter released, and do not detect certain keys, depending on the browser.
    Whereas onkeyup triggers when the key is released, and detects all keys.
    Try changing it to
    Code:
    document.onkeyup = function() {return Hello(event);}

  • Users who have thanked Lerura for this post:

    DaveyErwin (06-23-2012)

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Davey, I had tried that too with no luck. Lerura, I need it to be onkeypress, because I want it to trigger as soon as the key is pressed, even before the key is released. It works properly when in the body tag, just not when I try converting it like I did.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Ill just "flesh out" Lerura's suggestion …

    Code:
    <!doctype html>
    <head>
    <title>keypress</title>
    </head>
    <body><div>
    <div id="testDiv"></div>
    <script>
    document.onkeydown = function(e) {Hello(e);}
    function Hello(e){
    e = e || event;
    key = e.which || e.keyCode;
    alert(key)
    }
    </script>
    </body>
    </html>
    Last edited by DaveyErwin; 06-23-2012 at 05:38 PM.

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    897
    Thanks
    0
    Thanked 118 Times in 117 Posts
    Quote Originally Posted by resin View Post
    Davey, I had tried that too with no luck. Lerura, I need it to be onkeypress, because I want it to trigger as soon as the key is pressed, even before the key is released. It works properly when in the body tag, just not when I try converting it like I did.
    then you must use unkeydown. onkeypress doesn't trigger until you release the key again

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    onkeydown and onkeypress trigger one after the other when the key is pressed - the difference is that onkeydown triggers for all keys whereas onkeypress only follows it for keys that actually send a character to the computer (so the alt key for ezample will trigger keydown but not keypress while the H key will trigger both).

    onkeyup is the only event triggered when the key is released.

    Any event handlers attached to the body tag attach to the window object - not the document.body object or the document object.

    Code:
    window.onkeypress = function() {return Hello(event);}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Unfortunately this isn't working either. Perhaps I should have mentioned this actually is being used in conjunction with onkeydown, so my complete body tag is actually <body onkeypress="return Hello(event)" onkeydown="return Hello(event)">. It's for a Alt+I function. But I did try adding both to my script like so (but still didn't work),

    window.onkeypress = function() {return Hello(event);}
    window.onkeydown = function() {return Hello(event);}

    also tried,

    document.onkeypress = function() {return Hello(event);}
    document.onkeydown = function() {return Hello(event);}

    and,

    document.body.onkeypress = function() {return Hello(event);}
    document.body.onkeydown = function() {return Hello(event);}

    None of these have worked. But the function does run properly when placed within the body tag. But from what I understand it's not good practice to call events from within html tags, so I've been trying to convert them to script instead.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    see post #5
    Code:
    <!doctype html>
    <head>
    <title>keypress</title>
    <script>
    function init(){
        var testDiv = document.getElementById("testDiv");
        document.onkeydown = function(e) {
    	e = e || event;
    	key = e.which || e.keyCode;
    	testDiv.appendChild(document.createTextNode(key+" down"));
    	testDiv.appendChild(document.createElement("BR"));
        }
        document.onkeyup = function(e) {
    	e = e || event;
    	key = e.which || e.keyCode;
    	testDiv.appendChild(document.createTextNode(key+" up"));
    	testDiv.appendChild(document.createElement("BR"));
        }
    }
    </script>
    </head>
    <body onload="init()">
    <div id="testDiv"></div>
    </body>
    </html>
    Last edited by DaveyErwin; 06-24-2012 at 01:25 PM.

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by felgall View Post
    onkeydown and onkeypress trigger one after the other when the key is pressed - the difference is that onkeydown triggers for all keys whereas onkeypress only follows it for keys that actually send a character to the computer (so the alt key for ezample will trigger keydown but not keypress while the H key will trigger both).

    onkeyup is the only event triggered when the key is released.

    Any event handlers attached to the body tag attach to the window object - not the document.body object or the document object.

    Code:
    window.onkeypress = function() {return Hello(event);}
    I don't know exacly what you are saying here ?
    This code does not work in ie8 and below ...
    Code:
    <!doctype html>
    <head>
    <title>keypress</title>
    <script>
    function init(){
        var testDiv = document.getElementById("testDiv");
        window.onkeydown = function(e) {
    	e = e || event;
    	key = e.which || e.keyCode;
    	testDiv.appendChild(document.createTextNode(key+" down"));
    	testDiv.appendChild(document.createElement("BR"));
        }
        window.onkeyup = function(e) {
    	e = e || event;
    	key = e.which || e.keyCode;
    	testDiv.appendChild(document.createTextNode(key+" up"));
    	testDiv.appendChild(document.createElement("BR"));
        }
    }
    </script>
    </head>
    <body onload="init()">
    <div id="testDiv"></div>
    </body>
    </html>
    but this does work …
    Code:
    <!doctype html>
    <head>
    <title>keypress</title>
    <script>
    function init(){
        var testDiv = document.getElementById("testDiv");
        document.onkeydown = function(e) {
    	e = e || event;
    	key = e.which || e.keyCode;
    	testDiv.appendChild(document.createTextNode(key+" down"));
    	testDiv.appendChild(document.createElement("BR"));
        }
        document.onkeyup = function(e) {
    	e = e || event;
    	key = e.which || e.keyCode;
    	testDiv.appendChild(document.createTextNode(key+" up"));
    	testDiv.appendChild(document.createElement("BR"));
        }
    }
    </script>
    </head>
    <body onload="init()">
    <div id="testDiv"></div>
    </body>
    </html>
    Last edited by DaveyErwin; 06-24-2012 at 02:39 PM.


  •  

    Posting Permissions

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