我在测试网页中使用 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”方法……或者我不理解这个功能。
有人可以帮忙吗?提前非常感谢。