Simulate a windows command prompt with javascript

Hello experts

I need to create a windows command prompt like window in a browser. It should display a prompt and call other functions or return errors based on what the user typed.

I have a very basic/non functional sample which is included at the bottom - This should provide the basic idea. For those of you running windows, you should be familiar with the windows command prompt. cmd.exe or command.exe on other versions - I basically need the same functionality.

When the user hits the enter key, it should read what the user typed and perform an action bases on that. To keep things simple, let's say if the user types "myprogram.exe" then the next line in this command window should say "success"  and be ready with another prompt. If the user types anything else, it should write "unknown command" and be ready with a prompt.

It would also be nice if the user could not edit the prompt part - just like the windows command prompt.

It does not have to be a text area - Anything you can come up with.

please help.


<html>
<style>

body {border: 0px; cursor: default;}
textarea {
background: yellow;
background-image: url(image.gif);
color: #ffffff;
font-weight: none;
font-family: courier;
font-size: 14px;
cursor: default;
}
</style>

<script language="javascript">

function chkenterkey()
{
  if (event.keyCode == 13) {
    try {
      // document.all.t1.value = Char(13);
      document.all.t1.value = 'cccl>'
    } catch(el) {}
    return false;
  }
}
</script>

<body topmargin=0 leftmargin=0 scroll=no bgcolor=menu>

      <textarea onKeyDown="chkenterkey();" onSelectStart="return false;" style="background-color: #000000;" cols=70 rows=25 scrolling=auto name="t1"></textarea>
</body>
</html>

LVL 3
hans_larsonAsked:
Who is Participating?
 
viola123Commented:
hi, i fixed the first two:

1.you don't have to worry about the string length, as i always count from the last character and length is 15. you successful conmmand 'myprogram.exe' is obviously less than 15.

2. the cursor is not able to be removed now

3. i am still working on this point..........................

<html>
<style>

body {border: 0px; cursor: default;}
textarea {
background: yellow;
background-image: url(image.gif);
color: #ffffff;
font-weight: none;
font-family: courier;
font-size: 14px;
cursor: default;
}
</style>

<script language="javascript">
function setCaretToEnd (el) {
  if (el.createTextRange) {
    var v = el.value;
    var r = el.createTextRange();
    r.moveStart('character', v.length);
    r.select();
  }
}
function insertAtEnd (el, txt) {
  el.value += txt;
  setCaretToEnd (el);
}
function chkenterkey()
{
      var txtVal = document.getElementById("Textarea1");
      var lastInput = txtVal.value.substring(txtVal.value.length-15);
      
      if (event.keyCode == 8) txtVal.value += ">";
      
      if (event.keyCode == 13) {
            if (lastInput.indexOf("myprogram.exe")!=-1)
                  insertAtEnd(txtVal,"\nSuccess\ncccl>");
            else
                  insertAtEnd(txtVal,"\nUnknown Command\ncccl>");
      }
}
function getPrompt(){
      document.all.t1.value = 'cccl>';
}
</script>

<body onload="getPrompt()" topmargin=0 leftmargin=0 scroll=no bgcolor=menu>
     <textarea onKeyDown="chkenterkey();" style="background-color: #000000;foreColor:#ffffff" cols=70 rows=25 scrolling=auto name="t1" ID="Textarea1"></textarea>
</body>
</html>

cheers
viola

0
 
viola123Commented:
<html>
<style>

body {border: 0px; cursor: default;}
textarea {
background: yellow;
background-image: url(image.gif);
color: #ffffff;
font-weight: none;
font-family: courier;
font-size: 14px;
cursor: default;
}
</style>

<script language="javascript">

function chkenterkey()
{
      var txtVal = document.getElementById("Textarea1");
      var lastInput = txtVal.value.substring(txtVal.value.length-15);
      if (event.keyCode == 13) {
      alert(lastInput);
            if (lastInput.indexOf("myprogram.exe")!=-1)
                  txtVal.value += "\nSuccess\ncccl>";
            else
                  txtVal.value += "\nUnknown Command\ncccl>";
      }
}
function getPrompt(){
      document.all.t1.value = 'cccl>';
}
</script>

<body onload="getPrompt()" topmargin=0 leftmargin=0 scroll=no bgcolor=menu>
     <textarea onKeyDown="chkenterkey();" style="background-color: #000000;foreColor:#ffffff" cols=70 rows=25 scrolling=auto name="t1" ID="Textarea1"></textarea>
</body>
</html>
0
 
hans_larsonAuthor Commented:
That's close. Thanks.

How can I fix the following:

1. The command the user types can be any length as it may contain a long string of parameters. It can also be short, so the static 15 character will not work in this case. Could you count the characters on every key press and somehow determine the length?

2. How can I prevent the user from deleting the prompt? Can you detect the position of the cursor on the row and if the posistion is 5 and the character is ">" then return false on backspace? Or something similar.

3. How can I type on the same line as the prompt as oposed to the next line?

Thank you for your help.
0
 
hans_larsonAuthor Commented:
I think I have it working with 99.5% of your help and 0.5% that I added. Thank you.

Please feel free to point out any bugs or suggestions.

<html>
<style>

body {border: 0px; cursor: default;}
textarea {
color: #ffffff;
font-weight: none;
font-family: courier;
font-size: 14px;
cursor: default;
}
</style>

<script language="javascript">

cmdl = 0;

function chkenterkey()
{
     var txtVal = document.getElementById("Textarea1");
     // var lastInput = txtVal.value.substring(txtVal.value.length-15);
     var lastInput = txtVal.value.substring(txtVal.value.length-cmdl);

      lastInput = lastInput.toUpperCase();


     if (event.keyCode == 13) {
        // alert(lastInput);
      // alert(cmdl);
      cmdl = 0;
          if (lastInput == "MYPROGRAM.EXE")
               txtVal.value += "\n\nSuccess\n\ncommand>";
          else if (lastInput == "CLS")
               txtVal.value = "command>";
          else if (lastInput == "")
               txtVal.value += "\ncommand>";
          else if (lastInput == "HELP")
               txtVal.value += "\n\RTFM\ncommand>";
          else
               txtVal.value += "\nUnknown Command. Type 'Help' for a list of available commands.\n\ncommand>";
     }


     if (event.keyCode == 13) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
        return false;
     }


     if (event.keyCode == 8) {
      if (cmdl > 0)
            cmdl = cmdl -1;
      else
            txtVal.value += ">";
     }


     if (event.keyCode > 31) {
      cmdl += 1;
     }

}

function getPrompt(){
     document.all.t1.value = 'command>';
}

</script>

<body onload="getPrompt()" topmargin=0 leftmargin=0 scroll=no bgcolor=menu>
     <textarea onKeyDown="chkenterkey();" style="background-color: #000000;foreColor:#ffffff" cols=70 rows=25 scrolling=auto name="t1" ID="Textarea1"></textarea>
</body>
</html>
 
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.