javascript - 构建 DOS 风格的脚本。如何制作命令行？

Question

我一直有制作一个基于文本区域的程序的想法，该程序获取最后一行并将其用作命令。所以它看起来像一些很酷的类 DOS 程序。但实际上又是简单的 textarea -> AJAX -> PHP -> textarea。基于 Textarea 的版本效果很好，但有很多缺点。主要与没有获得正确的命令和脚本可能存在的漏洞有关。

所以，我的想法是完全分开使用输出容器和命令行。我找到了 a good example of what I want ，但我不知道它是如何制作的。主要思想是，洞的东西感觉就像一个文本 block ，您可以突出显示它:

但是你实际上不能删除提示符(c:>)或上面已经输出的文本..因为命令行是一个实际的输入。

我不明白，这个效果是怎么实现的。你可以看上面的例子源码，基本上是这样的:

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

它背后的 JavaScript 是:http://pastebin.com/pjbd9Y7k

我怎样才能将 span 行与输入合并，所以它像一行一样工作，但你不能操纵 span#prompt 或 span#blinker内容？

很难在 www 上找到此类本地化问题的任何帮助。我可以在上面的示例链接中看到一些 CSS。但是我的 CSS 知识告诉我，它与该布局无关。

此外，我准确地画出了我想做的事情，因为很难解释这些类型的技术问题:

• 红色 = 一般包装器，功能不多
• 蓝色 = 提示区域，非常静态
• 绿色 = 书写区域，在打字时扩大宽度，将闪光灯推到更右边
• 紫色 = Blinker 容器，简单的 gif 动画，如下所示:

注意:我实际上并没有抄袭那个示例站点，而只是抄袭那个命令行布局。欢迎任何提示、链接代码或想法。它可以完全替代，但应该达到目标，谢谢:)

编辑:感谢 Joe，问题得到了解决。然而，由于最初的想法可能会在未来引起某些人的兴趣。我将附上一张小图片，展示我的脚本的样子。也许有一天这会激励你们中的一些人 :)

Answer 1

他所做的是在屏幕外隐藏一个文本框。实际的命令行只是一个样式为具有 1 行高度的元素。单击此命令行时，文本框将获得焦点。

C:\> 和 _ 将文本区域夹在中间，因此您的文本出现在两者之间，从而增加了命令行上的 width元素，然后将 _ 推到右边，给人一种它自己移动的错觉。

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