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>

最終結果