构建DOS感觉脚本.如何制作命令行？

Question

我总是有想法创建一个基于textarea的程序,它获取最后一行并将其用作命令.所以它看起来像一些很酷的DOS类程序..但实际上是简单的textarea - > AJAX - > PHP - > textarea再次.基于Textarea的版本效果很好,但有很多缺点.主要与没有获得正确的命令和脚本可能的漏洞有关.

所以,我的想法是完全单独使用输出容器和命令行.我找到了一个我想要的好例子,但我无法弄清楚它是如何制作的.主要的想法是,洞的感觉就像一个文本块,你可以突出它:

但是您实际上无法删除提示符(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#prompt或span#blinker内容？

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

另外,我精确地提出了我正在考虑的事情,因为很难解释这些类型的技术问题:

• 红色=通用包装,功能不多
• 蓝色=提示区域,非常静态
• 绿色=书写区域,在打字时展开其宽度,将闪光灯向右推
• Purple = Blinker容器,简单的gif动画,如下所示:

注意:我实际上并没有剥离该示例站点,但只是那个命令行布局.欢迎任何提示,链接代码或想法.它可以完全替代,但应该实现目标,谢谢:)

编辑:感谢Joe解决了这个问题.然而,由于最初的想法可能会引起某些人的兴趣.我将包括一个小图片,我的脚本看起来像什么.也许这有一天会激励你们中的一些人:)

Answer 1

他正在做的是在屏幕外隐藏文本框.实际的命令行只是一个样式,有1行的高度.单击此命令行时,文本框将获得焦点.

在C:\>和_三明治textarea的,所以你的文字出现在两者之间,从而增加了width在命令行元素在您键入,并推_到右边,给它移动了自己的幻觉.

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