Building a DOS-feel script. How to make the command line?

Question

I always had the idea to make a textarea based program, that gets the last line and uses it as a command. So it looks like some cool DOS-like program.. But in fact is simple textarea -> AJAX -> PHP -> textarea again. Textarea based version works great, but has alot of drawbacks. Mostly related to not getting the right command and possible vulnerabilities to the script.

So, my idea is to use a output container and command line totally separately. I found a good example of what I want , but I cannot figure out, how it is actually made. The main idea is that the hole thing feels like one block of text and you can highlight it:

But you actually cant delete the prompt (c:>) or the already outputted text above.. Since the command line is an actual input.

I don't understand, how this effect is being achieved. You can see the above examples source code, it is basically:

<div id="black_wrapper">
    <div id="outputted_code"></div>
    <span id="prompt">c:\&gt;</span><span id="commandline"></span><span id="blinker"></span>
    <input type="text" name="actual_commandline" value="" />
</div>

And the JavaScript behind it is: http://pastebin.com/pjbd9Y7k

How can I merge the spans line with the input, so it works like one line, but you cannot manipulate the span#prompt or span#blinker contents?

It is very hard to find any help on www for such localized problems. I can see some CSS in the example-link above..however my knowledge of CSS tells me, that it has nothing to do with that layout.

Also, I drew out exactly what I'm thinking to do, as it is very hard to explain these types of technical questions:

• Red = General wrapper, not much function
• Blue = Prompt area, very static
• Green = Writing area, expands its width when typing, pushing the blinker more to the right
• Purple = Blinker container, simple gif animation that looks like this:

Note: I'm not actually ripping-off that example site, but well only that command-line layout. Any hint, link code or idea is welcome. It can be totally alternative, but should achieve the goal, thanks :)

Edit: The question got solved thanks to Joe. However, since the original idea might interest somebody in the future.. I will include a small picture, of what my script looks like. Maybe this inspires some of you someday :)

Answer 1

What he's doing is hiding a textbox off-screen. The actual command line is just an element styled to have 1 line's worth of height. When you click this command line, the textbox takes focus.

The C:\\> and _ sandwich the textarea, so your text appears in between, thus increasing the width on the command line element as you type, and pushing the _ to the right, giving the illusion that it moved on its own.

http://jsfiddle.net/YeR3L/1/