时间戳

首页 > 解决方案 > 如何在 xterm.js 中使用滚动线

xtermjs - 如何在 xterm.js 中使用滚动线

问题描述

我在测试网页中使用 xterm.js：

<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="./xterm.css" />
       <script src="./xterm.js"></script>
      <script src="./bidon.js"></script>
    </head>
    <body>
      <div id="terminal" style="font-size: 6px;"></div>
      <script>
        var term = new Terminal({"cols" : 200, 
                                                         //, "cursorBlink": "block"
                                                         "rows" : 100,
                                                         "lineHeight" : navigator.userAgent.indexOf("Firefox") >= 0 ? 1.2 : 1
                                                        });
        var curr_line = '';
        var entries = [];
        var currPos = 0;
        var pos = 0;
        var copied_text = "";
        
        var INVITE = "TST-TDU> ";
        var INVITE_COLOURED = '\u001b[32m' + INVITE + '\u001b[37m';
        var INVITE_LENGTH = INVITE.length;
        var INVITE_LENGTH_PLUS1 = INVITE_LENGTH + 1;
        var INVITE_LENGTH_MINUS1 = INVITE_LENGTH - 1;

        //var INACTIVE_KEY_CODE = [27, 33,34,35,36,45,46,112,113,114,115,116,117,118,119,120,121,122,123] ;  // Escape, Insert, Delete, Page Begin, Page End, Page Up, Page Dow, Fx
        var INACTIVE_KEY_CODE = [27,35,36,45,46,112,113,114,115,116,117,118,119,120,121,122,123] ;  // Escape, Insert, Delete, Page Begin, Page End, Page Up, Page Dow, Fx
        
        
        term.open(document.getElementById('terminal'));
        term.prompt = function() {
            term.write('\n\r' + curr_line + '\r\n'+INVITE_COLOURED);
        };
        term.write('Welcome to Command Line Interface tool!');
        term.prompt();
        
        processCommandLineV2 = function(command) {
            curr_line = command + " processed" ;
            term.prompt();
        }

        
        term.onKey(function (e) {
            var ev = e.domEvent;

            var printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey && !(ev.keyCode === 37 && term._core.buffer.x < INVITE_LENGTH_PLUS1);


            if (ev.keyCode === 13) { // Enter key
                if (curr_line.replace(/^\s+|\s+$/g, '').length != 0) { // Check if string is all whitespace
                    entries.push(curr_line);
                    currPos = entries.length - 1;
                    //processCommandLine(curr_line);
                    processCommandLineV2(curr_line);
                } else {
                    term.write('\n\33[2K\r'+INVITE_COLOURED);
                }
                curr_line = '';
            } else if (ev.keyCode === 8) { // Backspace
                if (term._core.buffer.x > INVITE_LENGTH) {
                    curr_line = curr_line.slice(0, term._core.buffer.x - INVITE_LENGTH_PLUS1) + curr_line.slice(term._core.buffer.x - INVITE_LENGTH);
                    pos = curr_line.length - term._core.buffer.x + INVITE_LENGTH_PLUS1;
                    term.write('\33[2K\r'+INVITE_COLOURED + curr_line);
                    term.write('\033['.concat(pos.toString()).concat('D')); //term.write('\033[<N>D');
                    if (term._core.buffer.x == INVITE_LENGTH || term._core.buffer.x == curr_line.length + INVITE_LENGTH_PLUS1) {
                        term.write('\033[1C')
                    }
                }
            } else if (ev.keyCode === 38) { // Up arrow
                if (entries.length > 0) {
                    curr_line = entries[currPos];
                    term.write('\33[2K\r'+INVITE_COLOURED + curr_line);
                    if (currPos > 0) {
                        currPos -= 1;
                    }
                }
            } else if (ev.keyCode === 33) {
                term.writeln("key page up")
                term.scrollLines(-2);
            }else if (ev.keyCode === 34) { 
                term.writeln("key page down")
                term.scrollLines(3);
            }else if (ev.keyCode === 40) { // Down arrow
                currPos += 1;
                if (currPos === entries.length || entries.length === 0) {
                    currPos -= 1;
                    curr_line = '';
                    term.write('\33[2K\r'+INVITE_COLOURED);
                } else {
                    curr_line = entries[currPos];
                    term.write('\33[2K\r'+INVITE_COLOURED + curr_line);

                }
            } else if (ev.keyCode == 9 && term._core.buffer.x >= curr_line.length + INVITE_LENGTH) {
                completionObj = completion(curr_line);
                if (completionObj.matching.length != 0) {
                    formatCompletion(completionObj.matching,MAX_CHAR_BY_LINE)
                    curr_line = completionObj.completed;
                    term.write('\r\n'+INVITE_COLOURED + curr_line);
                }
            } else if (INACTIVE_KEY_CODE.indexOf(ev.keyCode) != -1) {   
                // do nothing
            } else if (printable && !(ev.keyCode === 39 && term._core.buffer.x > curr_line.length + INVITE_LENGTH_MINUS1)) {
                if (ev.keyCode != 37 && ev.keyCode != 39) {
                    var input = ev.key;
                    if (ev.keyCode == 9) { // Tab
                        input = "    ";
                    }
                    pos = curr_line.length - term._core.buffer.x + INVITE_LENGTH; // test
                    curr_line = [curr_line.slice(0, term._core.buffer.x - INVITE_LENGTH), input, curr_line.slice(term._core.buffer.x - INVITE_LENGTH)].join('');
                    term.write('\33[2K\r'+INVITE_COLOURED + curr_line);
                    if (curr_line.length + INVITE_LENGTH_MINUS1 > term._core.buffer.x) term.write('\033['.concat(pos.toString()).concat('D')); //term.write('\033[<N>D');
                } else {
                    if (ev.keyCode === 37) {
                        term.write('\033[D'); // left arrow
                    }
                    else term.write('\033[C'); // right arrow
                }
            }   
        }); 

     </script>
    </body>
  </html>

不幸的是，我没有处理“Page Up”/“Page Down”不起作用（案例ev.keyCode = 33或34）。使用“向下/向上”按钮时，我想向下/向上翻页。可能是我没有正确使用“scrollLines”方法……或者我不理解这个功能。

有人可以帮忙吗？提前非常感谢。

标签： xtermjs

解决方案

推荐阅读