Solved

Simulate a windows command prompt with javascript

Posted on 2004-09-26
4
285 Views
Last Modified: 2008-02-01
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>

0
Comment
Question by:hans_larson
  • 2
  • 2
4 Comments
 
LVL 6

Expert Comment

by:viola123
ID: 12157873
<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
 
LVL 3

Author Comment

by:hans_larson
ID: 12157987
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
 
LVL 6

Accepted Solution

by:
viola123 earned 125 total points
ID: 12158093
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
 
LVL 3

Author Comment

by:hans_larson
ID: 12158120
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now