如何检测 "Terminal" 之类 html 脚本的输入？

Question

我在 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>

而且我已经尝试使用 if 检查输入，但似乎没有用，这是我的代码：

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

我已经浏览了网页，但我仍然没有找到任何东西，我可以得到一些帮助吗？,

谢谢，Blitzel

Answer 1

希望以下内容能为如何进行提供启发！分配一个值时，您使用单个 = 但要检查相等性，您使用 == 或者，对于严格相等性 ===

点击按钮，我相信会触发 run/test 输入的命令，因此向该按钮添加一个 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>

如何检测 "Terminal" 之类 html 脚本的输入？

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

html

javascript

css

terminal