简体   繁体   English

如何检测我的“终端”上的输入,例如 html 脚本?

[英]How can I detect for input on my "Terminal" like html script?

I have written a script in html for a "Terminal".我在 html 中为“终端”编写了一个脚本。

<html>

  <head>
    <title>Nonscript</title>
    <div id="htmlterminal">
      <center>
        <pre>
 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 |H|T|M|L| |T|E|R|M|I|N|A|L| |M|A|D|E| |B|Y| |M|A|X|
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+       
     </pre>
      </center>
    </div>
    <style>
      #htmlterminal {
        background: red;
        background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet);
        background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
        background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
        background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 3vw;
      }

      #htmlterminal

    </style>
  </head>

  <body style="background-color:Black;">
    <p id="welcome" , style="color:white">Hello welcome to the HTML Terminal, for a list of commands type "help".</p>
    <center>
      <form class="pure-form">
        <input id="command_prompt" type="text" placeholder="Enter command" />
        <button type="submit">Run<i class="fa fa-chevron-circle-right"></i></button>
      </form>
    </center>
    <p id="return" , style="color:white"></p>
    <script>
      var commandPrompt = document.getElementById('command_prompt');

      document.querySelector('form.pure-form').addEventListener('submit', function(e) {


        e.preventDefault();

        document.getElementById("return").innerHTML = "Executing: " + commandPrompt.value;
      });

    </script>
  </body>

</html>

And I have tried using if to check for input but it dosent seem to be working, here is my code:我曾尝试使用if来检查输入,但它似乎正在工作,这是我的代码:

if commandPrompt.value = "help" {
  document.getElementById("return").innerHTML = "Some more commands come here"
}
else{
return null
}

I have browsed the web but I still havent found anything, may I get some help?,我浏览了 web 但我还没有找到任何东西,我可以寻求帮助吗?

Thanks, Blitzel谢谢, 布利策尔

Hope the following might shine a light on how to proceed!希望以下内容可以说明如何进行! When assigning a value you use a single = but to check equality you use == or, for strict equality ===分配值时使用单个=但要检查相等性则使用==或者,对于严格相等===

The clicking of the button is, I believe the trigger to run/test the command entered so add a click event handler to that button and from there process the value entered into the text field.单击按钮是,我相信触发器运行/测试输入的命令,因此向该按钮添加一个click事件处理程序,并从那里处理输入到文本字段中的值。

 let cmd=document.getElementById('command_prompt'); let output=document.getElementById("return"); let bttn = document.querySelector('button[type="submit"]').addEventListener('click', function(e) { e.preventDefault(); let value; switch( cmd.value ){ case 'help': value='Some more commands come here'; break; case 'panic': value='Other text/cmds'; break; default: value='The command: "' + cmd.value + '" has not been defined'; break; } output.innerHTML=value; })
 #htmlterminal { background: red; background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet); background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3vw; }
 <div id="htmlterminal"> <center> <pre> +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ |H|T|M|L| |T|E|R|M|I|N|A|L| |M|A|D|E| |B|Y| |M|A|X| +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ </pre> </center> </div> <p id="welcome">Hello welcome to the HTML Terminal, for a list of commands type "help".</p> <center> <form class="pure-form"> <input id="command_prompt" type="text" placeholder="Enter command" /> <button type="submit">Run<i class="fa fa-chevron-circle-right"></i></button> </form> </center> <p id="return" style="color:red"></p>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM