偽の端末のブラウザ - 応答する方法

私はブラウザで端末を作成しようとしていますが、私はそれを作る方法を知らないので、 "コマンド"を入力すると応答します"ターミナル"内の何か。私のコードは次のとおりです：偽の端末のブラウザ - 応答する方法

<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」を実行するときに、端末で何かを応答させたいだけです。

出典

2017-02-24 Gavwin

あなたが... '$値を消去しているのと同じ方法を持っていませんthis.val（ 'Hi。'）; '。 – Santi

私はそれが入力にないようにしたいので、それは外にあるので編集できません@Santi – Gavwin

私が応答している間、スコットは良い解決策を投稿しました。 – Santi

あなたが偽の「コンソール」出力領域を追加する必要があります。だから、これは何か？

FYI：$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>

出典

2017-02-24 21:00:11

ありがとうございます！これは私が探していたものです – Gavwin

@ Gavwin楽しみのためだけにスタイリングを加えました！ –

ああクール、ありがとう！ @スコット・マーカス – Gavwin

あなたは.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>

出典

2017-02-24 20:54:06

私はそれが入力にないようにしたい、それはそれの外にあるので、編集することはできません。 – Gavwin

Scottの解決策は次に動作します - 次回は、出力が質問に表示されたい場所を明示してください:) –

Okありがとう@an – Gavwin

偽の端末のブラウザ - 応答する方法

答えて

関連する問題