?
Solved

Simulate a windows command prompt with javascript

Posted on 2004-09-26
4
Medium Priority
?
307 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 500 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

777 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