码迷,mamicode.com
首页 > Web开发 > 详细

Js 之终端插件

时间:2020-01-13 16:05:38      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:ref   doc   ali   std   round   lib   reg   event   function   

这个终端插件通常与websocket一起使用。

下载地址:https://pan.baidu.com/s/1WbyLNOYbwwikOi_iMU7oKA 

提取码:6mc7 

一、效果图

技术图片

 二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xterm.js</title>
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css">
    <script src="node_modules/xterm/lib/xterm.js"></script>
</head>
<body>
<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;

            if (e.domEvent.keyCode === 13) {
                prompt(term);
            } else if (e.domEvent.keyCode === 8) {
                // Do not delete the prompt
                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>
</body>
</html>

Js 之终端插件

标签:ref   doc   ali   std   round   lib   reg   event   function   

原文地址:https://www.cnblogs.com/yang-2018/p/12187617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!