Making a simple terminal in HTML

Question

I want to make a simple console terminal using stdin and stdout. Basically I have a function that inputs something and retrieves something to the chat.

As you know it would say something like [email protected]:/ and then I can type ONLY in that line. When I press enter/submit it would appear another line with [email protected]:/ for me to type again.

How do I make this to be able to type only in the last line and in front of the [email protected]:/ (basically this is locked)?

Any better ideas to implement this instead of textarea??

$('#btnSubmit').click(function() { var terminal = $('#terminal'); var stdin = terminal.val(); console.log(stdin); //Get stdout (FAKE FOR THE EXAMPLE) terminal.append(stdout() + '<br>'); }); function stdout(stdin) { return "[email protected]:/" }

.terminal { background-color: #000; color: #fff }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea class="terminal" rows="20" id="terminal"></textarea> <button class="btn btn-primary" id="btnSubmit" type="button">Send</button>

I believe it's not possible to insert any HTML into a textarea element without it returning the tags as inline strings. — Levano
– Levano, Commented Jan 23, 2018 at 9:51
If a textarea isn't absolutely necessary, you could instead try to use a div that has the contenteditable attribute? And then add your desired elements there. — Levano
– Levano, Commented Jan 23, 2018 at 9:59

jperezmartin · Accepted Answer · 2021-07-08 02:40:49Z

Like you say, you really only need one line to write in. You could just make that single line an input field and output the "history" in a div abve your input field.

Here is an example, only thing that is not looking like a terminal is the way this scrolls, but I guess that should be fixable with some extra code.

$(function() { $('.terminal').on('click', function() { $('#input').focus(); }); $('#input').on('keydown', function search(e) { if (e.keyCode == 13) { // append your output to the history, // here I just append the input $('#history').append($(this).val() + '<br/>'); // you can change the path if you want // crappy implementation here, but you get the idea if ($(this).val().substring(0, 3) === 'cd ') { $('#path').html($(this).val().substring(3) + '&nbsp;>&nbsp;'); } // clear the input $('#input').val(''); } }); });

.terminal{ background: black; color: white; font: courier; padding: 10px; height: 100px; overflow: hidden; } .line{ display: table; width: 100%; } .terminal span{ display:table-cell; width:1px; } .terminal input{ display:table-cell; width:100%; border: none; background: black; color: white; outline: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="terminal"> <div id="history"> </div> <div class="line"> <span id="path">c:/&nbsp;>&nbsp;</span> <input type="text" id="input"> </div> </div>

Levano · Accepted Answer · 2018-01-23 10:16:47Z

You could try to insert an editable div instead.

JSFiddle Terminal Example

What I did was to create a pure CSS solution. I created a flex wrapper, with a static and editable div side by side. This will make sure that whatever digital output is displayed won't interfere with the user input.

HTML:

<section> <div class="static">IP ADDRESS</div> <div class="input" contenteditable="true"></div> </section>

CSS:

section { display: flex; flex-flow: row nowrap; width: 500px; height: auto; margin: 0 auto; background-color: lightgrey; font-family: monospace; } .static { width: auto; padding-right: 20px; } .input { flex: 1; }

Collectives™ on Stack Overflow

Making a simple terminal in HTML

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related