伪终端浏览器-如何使其响应

Question

我正在尝试在浏览器中创建一个终端，但我不知道如何创建终端，因此如果我键入“命令”，它将在“终端”中响应。 这是我的代码：

<body>
<div id="screen">$&gt;<input></input></div>
<script>
$("#screen input").focus();
$("#screen input").on('keydown', function(event) {
    if(event.which === 13) {// Enter key pressed
        var $this = $(this),
            val = $this.val();
        $this.focus().val('');
        if(val === "hello world") {
            //respond with something in the terminal here
        }
    }
});
</script>
</body>

因此，当我执行“ hello world”命令时，我只希望它在终端中响应。

Answer 1

您需要添加伪造的“控制台”输出区域。 那么，这样的事情？

仅供参考： $this.focus().val(''); 应该只是： $this.val(''); 和<input>元素没有结束标记（ </input> ）

 // Get reference to the output area var $out = $("#output"); $("#screen input").focus(); $("#screen input").on('keyup', function(event) { if(event.which === 13) { // Enter key pressed var $this = $(this); var val = $this.val(); if(val === "hello world") { $out.append(">> Hello Galaxy<br>"); } $this.val(''); } });

 body { font-family:"courier new", monospaced; border-radius:5px; border:2px solid black; height:60vh; background-color:rgba(200,200,200, .5); padding:10px; } input { background-color:rgb(0, 150, 0); color: #ff0; font-weight:bold; letter-spacing:.2em; } #output { color:#000; background-color:rgba(200,200,200, .25); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="screen">$&gt;<input></div> <!-- This is the output area --> <div id="output"></div>

Answer 2

您可以通过将字符串传递给.val()来设置输入的值：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="screen">$&gt;<input></input></div> <script> $("#screen input").focus(); $("#screen input").on('keydown', function(event) { if(event.which === 13) {// Enter key pressed var $this = $(this), val = $this.val(); $this.focus().val(''); if(val === "hello world") { $this.val('hi!') // just set the val } } }); </script> </body>

伪终端浏览器-如何使其响应

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-02-24 21:00:11

解决方案2
0 2017-02-24 20:54:06

伪终端浏览器-如何使其响应

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-02-24 21:00:11

解决方案2 0 2017-02-24 20:54:06

解决方案1
2 已采纳 2017-02-24 21:00:11

解决方案2
0 2017-02-24 20:54:06