Keypress function in native javascript

Question

Below is my code:

$(document).keypress(function(e){
  var s = String.fromCharCode(e.which);
  if ( s === "f"){
    alert ("its f");
  }
  else if ( s === "r"){
    alert ("its r");
  }
});

I wanna do this in JavaScript...........!!

How can i do this ?

Answer 1

document.addEventListener('keypress', function(e) { 
  var key = e.keyCode || e.which;
  ... // rest of code
});

Answer 2

In native js you can attach events, via onClick, onKeyPress, ... etc element attributes. Do not forget, the event parameter in the event handler function ;) In different browsers, you can read the code of pressed key via different attribute of the event.

Here is an example:

<script type="text/javascript">
  document.getElementsByTagName("body")[0].onkeypress=function(e){
       var s = String.fromCharCode(e.which | evt.witch );
       switch(s){
           case "f":
              alert("key is 'f'");
              break;
           ....
       }
   };
</script>

Or You can use the addEventListener method, like this:

<script type="text/javascript">
     document.getElementsByTagName("body")[0].addEventListener('keypress',function(e){
       var s = String.fromCharCode(e.which | evt.witch );
       switch(s){
           case "f":
              alert("key is 'f'");
              break;
           ....
       }
     });
</script>

You should run these scripts after document loaded. You can subscribe the domready event like this:

<script type="text/javascript">
       document.addEventListener( "DOMContentLoaded", function(){
           //your code here  (one of the above)
       }, false );
</script>

This last section is discussed here: javascript domready?. Unfortunetly you can subscribe domready event different ways depends on the client browser.

A sugggestion (offtopic):

There is a bunch of problems when you use native javascript, because of the browser's uncombatibilities, what is already resolved in jQuery. If you want to use jQuery, but you can not access the html code, and you want to load jQuery You can include jQuery to your site from the CDN url, with javascript too, like this:

<script>  
   (function() {
        var jQ = document.createElement('script'); jQ.type = 'text/javascript'; 
        jQ.async = true;
        jQ.src = '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jQ, s);
   })();
</script>

As the google makes in analitycs code ;)

Answer 3

try this

  document.onkeypress = keyPressFunction;

    function keyPressFunction(e) {
      var s = String.fromCharCode(e.which);
        if ( s === "f"){
         alert ("its f");
        }
        else if ( s === "r"){
         alert ("its r");
        }
    }

Answer 4

heres a simple function that do exactly what you want -

document.onkeydown=function(e){
    var char= String.fromCharCode(e.keyCode);
    if(char=='f'){
        alert(char);
    }else if(char=='r'){
        alert(char);
    }
}