Javascript onkeyup too "slow"? .hide() works only with onkeydown

Question

I am using a function to show a div:

function showCMD() {
 $("#cmd").show("fast");
 $('#cmdText').focus();
}

This happens, if the user is typing "cmd" on his keyboard.

Main code:

    document.onkeyup = function(event) {

      //Save the last three keys
      one = two;
      two = three;        
      three = event.keyCode;

      if (one == 67 && two == 77 && three == 68 && cmdOpen == false) {
        showCMD();
      }
            //if the pressed key is ENTER and the textarea is focused
            if (event.keyCode == 13 &&  $("#cmdText").is(":focus") == true) {
                //passing the code to another function
                execCMD(document.getElementById("cmdText").value);

                //empty the textarea - works great
                document.getElementById("cmdText").value = "";
                return false;
            }

    }

The code typed in by the user will be handled here:

function execCMD(command) {

    if(command == "exit") $("#cmd").hide("fast");
    console.log(command);
}

console gives me every time exit. But it doesn't hide the div #cmd. If I change onkeyup to onkeydown, it works fine. The problem with onkeydown is, that the textarea shows the "d", after opening the command line with key sequence "cmd".

So either I can't close the #cmd or it shows a "d" every time I open the #cmd.

Last but not least the html code:

<div id="cmd">
    <textarea id="cmdText" maxlength="80"></textarea>
</div>

Maybe you will know a solution for my problem! Thank you so far

You should also be careful with using '==' and instead use '===' to avoid type conversion. See this article: http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons — Kristian Barrett, Jun 21 '14 at 13:00

CMPS · Accepted Answer · 2014-06-21T13:00:29.467

Live demo

You need to trim() the command, because when you type exit, the command will store exit\n.

JS

function execCMD(command) {
    if(command.trim() == "exit") // Add trim()
        $("#cmd").hide("fast");
    console.log(command);
}

function showCMD() {
     $("#cmd").show("fast");
     $('#cmdText').focus();
}

document.onkeyup = function(event) {

   //Save the last three keys
   one = two;
   two = three;
   three = event.keyCode; // Change the order of declaration and definition


   if (one == 67 && two == 77 && three == 68 && cmdOpen == false) {
     showCMD();
   }

   //if the pressed key is ENTER and the textarea is focused
   if (event.keyCode == 13 &&  $("#cmdText").is(":focus") == true) {
       //passing the code to another function
       execCMD(document.getElementById("cmdText").value);

       //empty the textarea - works great
       document.getElementById("cmdText").value = "";
       return false;
    }

}

If I change the order of the one = two etc, it doesn't work anymore; but the .trim(); command does help. Now everything works great. Thank you very much — Standard, Jun 21 '14 at 12:56

Javascript onkeyup too "slow"? .hide() works only with onkeydown

1 Answers1