CODEWITHSUNDEEP
javascripthtmlsapui5
pokrak94
pokrak94

Reputation: 202

Detect which key was pressed in javascript?

I checked the following:

How to find out what character key is pressed? http://www.javascriptkit.com/javatutors/javascriptkey2.shtml http://www.w3schools.com/jsref/event_key_keycode.asp http://forums.asp.net/t/1782329.aspx?How+to+detect+which+Key+is+pressed+in+Javascript

And none of it is working. My current code gives me an alert saying "undefined" after I press some characters and press enter.

My current code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.ux3,sap.ui.commons,sap.ui.table, sap.ui.richtexteditor" data-sap-ui-theme="sap_goldreflection" data-sap-ui-language="en">
</script>

<script>
function showKeyPress(evt)
{
alert("onkeypress handler: \n"
      + "keyCode property: " + evt.keyCode + "\n"
      + "which property: " + evt.which + "\n"
      + "charCode property: " + evt.charCode + "\n"
      + "Character Key Pressed: "
      + String.fromCharCode(evt.charCode) + "\n"
     );
}
var oInput2 = new sap.ui.richtexteditor.RichTextEditor({
    id : 'ta',
    tooltip : 'This is a tooltip',
    width: '100%',
    rows : 4,
    wrapping : false,
    change: function(e)
    {
        var code =  oInput2.getValue();
        //console.log(code);
        var regex = /(<([^>]+)>)/ig
    //  var result = body.replace(regex, "");
        code = code.replace(/&nbsp;|/g, '');
        code = code.replace(regex,"");
        //console.log(code);
        var ex = code.split(' ');
        //console.log(ex);
        var array = ["&lt;?","&lt;?php","?&gt;"];
        var keyWords = ['__halt_compiler', 'abstract', 'and', 'array', 'as', 'break', 'callable', 'case', 'catch', 'class', 'clone', 'const', 'continue', 'declare', 'default', 'die', 'do', 'echo', 'else', 'elseif', 'empty', 'enddeclare', 'endfor', 'endforeach', 'endif', 'endswitch', 'endwhile', 'eval', 'exit', 'extends', 'final', 'for', 'foreach', 'function', 'global', 'goto', 'if', 'implements', 'include', 'include_once', 'instanceof', 'insteadof', 'interface', 'isset', 'list', 'namespace', 'new', 'or', 'print', 'private', 'protected', 'public', 'require', 'require_once', 'return', 'static', 'switch', 'throw', 'trait', 'try', 'unset', 'use', 'var', 'while', 'xor'];
        var colored = "";
        ex.forEach(function(entry){
            //alert(array.indexOf('<p>'+entry+'</p>'));
            alert(KeyboardEvent.location);
            var num = 0;
            if(array.indexOf(entry) > -1)
            {
                num = 1;
            }
            if(keyWords.indexOf(entry) > -1)
            {
                num = 2;
            }
            switch(num)
            {
                case 1:
                    colored += "<span style='color:red'> "+entry+"</span> ";
                    break;
                case 2:
                    colored += '<span style="color:blue"> '+entry+'</span> ';
                    break;
                default:
                    colored += entry+ ' ';
            }
        })

        //console.log(colored);
        oInput2.setValue(colored);

    }
    });
//  function cleanCode(a)
//  {
//      a = a.replace(/<span style="color: red;">/g, '');
//      return a;
//  }
    oInput2.placeAt('content');

oInput2.onkeypress = function(event)
{
    if(event.keyCode == 32)
    {
        alert("space");
        console.log("space");
    }
}

        </script>
        <script type="text/javascript">
        function myKeyPress(e){

            var keynum;

            if(window.event){ // IE                 
                keynum = e.keyCode;
            }else
                if(e.which){ // Netscape/Firefox/Opera                  
                    keynum = e.which;
                 }
            alert(String.fromCharCode(keynum));
        }
</script>
    </head>
    <body class="sapUiBody" onkeydown="myKeyPress(e);">
        <div id="content"></div>
    </body>
</html>

also I have this message (warning) in the console:

'KeyboardEvent.keyLocation' is deprecated. Please use 'KeyboardEvent.location' instead

Upvotes: 2

Views: 2107

Answers (3)

user5066707
user5066707

Reputation:

The right event to use is "keydown". Get the key pressed with keyCode or which with this way:

(e.keyCode||e.which)

Example using this:

window.onkeydown=function(e){
     alert(((e.keyCode||e.which)==32)?'Spacebar pressed.':'Spacebar was not pressed.');
}

Upvotes: 0

Matti.b
Matti.b

Reputation: 360

<!DOCTYPE html>
<html>
<body>
<script>
    window.addEventListener("keydown", function(e) { 
        //your code here
    });
</script>
</body>
</html>

Upvotes: 0

Matti.b
Matti.b

Reputation: 360

Hi please look at this example, it contains an example with multiple keys. The code in html should be sufficient:

   window.addEventListener("keydown", function(e) {
    //your code here
   });

Upvotes: 1

Related Questions