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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    function document.onkeydown()

    Well, I'm trying to program something so that when I press down a key, it'll jump down to that respective anchor bookmark. This Javascript seems to work fine in IE (WOAH, I KNOW), but doesn't do anything in Chrome, Firefox, or any of the other major browsers.

    Code:
    <head>
    	<script language="javascript">
    	function document.onkeydown(){
    		var str = String.fromCharCode(event.keyCode);
    			str = str.toLowerCase();
    			if (str == "1" || 
    				str == "97" || 					
    				str == "2" || 
    				str == "98" || 
    				str == "3" || 
    				str == "99" || 
    				str == "4" || 
    				str == "100" || 
    				str == "5" || 
    				str == "101" || 
    				str == "6" || 
    				str == "102" || 
    				str == "7" || 
    				str == "103" || 
    				str == "8" || 
    				str == "104" || 
    				str == "9" || 
    				str == "105") {
    				document.location.hash = str;
    			} else if (str == "p") {
    				document.location.hash="prechorus";
    			} else if (str == "c") {
    				document.location.hash="chorus";
    			} else if (str == "v") {
    				document.location.hash="chorus2";
    			} else if (str == "b") {
    				document.location.hash="bridge";
    			} else if (str == "t") {
    				document.location.hash="title";
    			}/* else {
    				event.returnValue=false;
    			} */
    		} 
    	</script>
    That all goes in the <head></head> sections of the page.

    And the chorus2 section I want to jump to (for example), which is in the <body></body> section.
    Code:
    <a name="chorus2">This is a chorus</a>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    What? This works in IE? I really really cannot believe that

    To assign an event handler for keydown you'll have to use something like this
    Code:
    window.onkeydown = function() {
       ...
    };

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    use (event.which) simple.

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    What? This works in IE? I really really cannot believe that

    To assign an event handler for keydown you'll have to use something like this
    Code:
    window.onkeydown = function() {
       ...
    };
    So right now, based on that, I have this
    Code:
    	<script language="javascript">
    		window.onkeydown = function(e) {
    			if(e.keyCode == 49) // if 1 (top row) is pressed
    				document.location.hash="1"; // goto Verse 1
    			if(e.keyCode == 50) // if 2 (top row) is pressed
    				document.location.hash="2"; // goto Verse 2
    			if(e.keyCode == 51) // if 3 (top row) is pressed
    				document.location.hash="3"; // goto Verse 3
    			if(e.keyCode == 52) // if 4 (top row) is pressed
    				document.location.hash="4"; // goto Verse 4
    			if(e.keyCode == 53) // if 5 (top row) is pressed
    				document.location.hash="5"; // goto Verse 5
    			if(e.keyCode == 54) // if 6 (top row) is pressed
    				document.location.hash="6"; // goto Verse 6
    			if(e.keyCode == 55) // if 7 (top row) is pressed
    				document.location.hash="7"; // goto Verse 7
    			if(e.keyCode == 56) // if 8 (top row) is pressed
    				document.location.hash="8"; // goto Verse 8
    			if(e.keyCode == 57) // if 9 (top row) is pressed
    				document.location.hash="9"; // goto Verse 9
    			if(e.keyCode == 67) // if c is pressed
    				document.location.hash="chorus"; // goto Chorus
    			if(e.keyCode == 66) // if b is pressed
    				document.location.hash="bridge"; // goto Bridge
    			if(e.keyCode == 86) // if v is pressed
    				document.location.hash="chorus2"; // goto Chorus2
    			if(e.keyCode == 84) // if t is pressed
    				document.location.hash="title"; // goto Title
    		};
    	</script>
    What I find strange is that in Chrome, if I press a button (say c, for Chorus), it goes down. Now the weird part is, that if I scroll up/down with my mousewheel, then press c again, it does not goes back to the chorus (which is intended). However it does this in IE and Firefox. Is it possible to replicate this behaviour in Chrome, so that when I scroll with my mousewheel/page down/up/ up arrow/ down arrow and then press a button, that it jumps back to that position?

    Thanks for all your help so far! Also, is there a more elegant way of doing what I've written?

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Note that IE is the only browser with a separate event object - with all the other browsers the event gets passed to the event handler as one of the parameters.

    Also IE uses charCode while all other browsers use keyCode.

    See http://localhost/js-ex/events08.php for a cross browser function to get the key that was pressed.
    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.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Code:
    <script type = "text/javascript">
    
    document.onkeydown = function(ev) {	
    var key;
    ev = ev || event;
    key = ev.keyCode;
    alert ("Keycode = " + key);
    
    which = String.fromCharCode(key).toUpperCase();
    if (key>=48 && key<=90) {
    alert ("You pressed the " + which + " key");  
    }
    
    }
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,291
    Thanks
    13
    Thanked 345 Times in 341 Posts
    Quote Originally Posted by devnull69 View Post
    What? This works in IE? I really really cannot believe that
    I think it suffices to define the event property. whether the function is defined via (anonymous) function statement or via function declaration doesn’t seem to matter.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    Code:
    <script type = "text/javascript">
    
    document.onkeydown = function(ev) {	
    var key;
    ev = ev || event;
    key = ev.keyCode;
    alert ("Keycode = " + key);
    
    which = String.fromCharCode(key).toUpperCase();
    if (key>=48 && key<=90) {
    alert ("You pressed the " + which + " key");  
    }
    
    }
    </script>
    If you use:

    Code:
    document.onkeydown = function(event) {
    then you wouldn't need:

    Code:
    ev = ev || event;
    and then just use event instead of ev
    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.


  •  

    Posting Permissions

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