XTerm前端工具模拟命令行

xterm.js是一个前端用来模拟命令行输入输出的工具，能够根据自己的需求进行定制自己需要的命令行，比如像Linux的shell终端，windows的控制台等

官网地址：

xterm.js

需要引入:

<link rel="/xterm/xterm.css">
<script src="/xterm/xterm.js"></script>

Demo

<div id="terminal">
</div>

<script>

let term = new Terminal({
        cursorStyle: 'underline', //光标样式
        cursorBlink: true, // 光标闪烁
        convertEol: true, //启用时，光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入。
        theme: {
            foreground: 'yellow', //字体
            background: '#060101', //背景色
            cursor: 'help',//设置光标
        }
    });
    term.open(document.getElementById('terminal'));
    function runFakeTerminal() {
        if (term._initialized) {
            return;
        }

        term._initialized = true;

        term.prompt = () => {
            term.write('\r\n~$ ');
        };

        term.writeln('Welcome to xterm.js');
        prompt(term);

        term.onKey(e => {
            const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;

        // enter key
        if (e.domEvent.keyCode === 13) {
            prompt(term);
        } else if (e.domEvent.keyCode === 8) { // BackSpace key
            
            if (term._core.buffer.x > 2) {
                term.write('\b \b');
               
            }
        } else if (printable) {
            term.write(e.key);
            
        }
        console.log(e.key);
    });
    }

    function prompt(term) {
        term.write('\r\n~$ ');
    }
    runFakeTerminal();

<script>

最终结果