当前行结束后的新行导致创建新提示

Question

我正在使用 xtermjs 制作一个浏览器终端，一切正常，除了我的代码中有一个我无法弄清楚的错误。问题是当用户在终端中键入并到达当前行的行尾时，它会移动到下一行，但也会创建一个新的 ~$>。如果用户按下回车键，我只想将 ~$> 写入终端，但它也会发生在新行的末尾。我哪里出错了，我该如何解决。任何帮助表示赞赏。提前致谢。

（要复制错误，请按住一个键直到到达下一行）

EDIT 我已将问题缩小到在最后一个 else if 语句 term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line); 中找到的这一行。问题出在我的 ascii 转义字符上。不过还是没修好。

再更新 1 个小错误 当终端与页面底部对齐时，您键入任意键并按几次回车键，直到到达接近尾端vertical space 终端将开始超出 HTML, body 的边界。我尝试按照 xterms github 中的建议添加 border: 0px;，但这并没有解决问题。我什至尝试了 position: fixed; overflow: hidden; margin: 0%; 但这并没有解决它。如何使终端的位置贴在页面底部而不超出 HTML，当垂直线的末端 space 为 width: 100%; height: 100%; 时，正文的尺寸为 width: 100%; height: 100%;即将到达？

var term = new Terminal({
  cursorBlink: "block"
});

var fit = new FitAddon.FitAddon()
term.loadAddon(fit);

var curr_line = '';
var entries = [];
var currPos = 0;
var pos = 0;

term.open(document.getElementById('terminal'));
term.prompt = () => {
  term.write('\n\r' + curr_line + '\r\n\u001b[32m~$>> \u001b[37m');
};
term.write('#Terminal');
term.prompt();

term.onKey(function(key) {
  const printable = !key.altKey && !key.altGraphKey && !key.ctrlKey && !key.metaKey &&
    !(key.key === ' ' && term._core.buffer.x < 6);
  if (key.key === '\r') { // 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;
      term.prompt();
    } else {
      term.write('\n[2K\r\u001b[32m~$>> \u001b[37m');
    }
    curr_line = '';
  } else if (key.key === '\x7F') { // Backspace\
    if (term._core.buffer.x > 5) {
      curr_line = curr_line.slice(0, term._core.buffer.x - 6) + curr_line.slice(term._core.buffer.x - 5);
      pos = curr_line.length - term._core.buffer.x + 6;
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
      term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
      if (term._core.buffer.x == 5 || term._core.buffer.x == curr_line.length + 6) {
        term.write('3[1C')
      }
    }
  } else if (key.key === '\x1B[A') { // Up arrow
    if (entries.length > 0) {
      if (currPos > 0) {
        currPos -= 1;
      }
      curr_line = entries[currPos];
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
    }
  } else if (key.key === '\x1B[B') { // Down arrow
    currPos += 1;
    if (currPos === entries.length || entries.length === 0) {
      currPos -= 1;
      curr_line = '';
      term.write('[2K\r\u001b[32m~$>> \u001b[37m');
    } else {
      curr_line = entries[currPos];
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);

    }
  } else if (printable && !(key.key === '\x1B[C' && term._core.buffer.x > curr_line.length + 4)) {
    if (key.key != '\x1B[D' && key.key != '\x1B[C') {
      var input = key.key;
      if (key.key == '\t') { // Tab
        input = "    ";
      }
      pos = curr_line.length - term._core.buffer.x + 4;
      curr_line = [curr_line.slice(0, term._core.buffer.x - 5), input, curr_line.slice(term._core.buffer.x - 5)].join('');
      term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
      term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
    } else {
      term.write(key.key);
    }
  }
});

.codeRunCon {
  display: flex;
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 70%;
  z-index: 9999;
  background-color: inherit;
  border-top-left-radius: 3%;
  border-top-right-radius: 3%;
}

.codeRunCon #terminal {
  display: flex;
  position: absolute;
  top: 20px;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.xterm {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  font-feature-settings: "liga" 0;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
  outline: none;
}

.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
  z-index: 5;
}

.xterm .xterm-helper-textarea {
  /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
  border: 0px;
  position: absolute;
  opacity: 0;
  left: -9999em;
  top: 0;
  width: 0;
  height: 0;
  z-index: -5;
  /** Prevent wrapping so the IME appears against the textarea at the correct position */
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}

.xterm .composition-view {
  /* TODO: Composition position got messed up somewhere */
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

.xterm .composition-view.active {
  display: block;
}

.xterm .xterm-viewport {
  /* On OS X this is required in order for the scroll bar to appear fully opaque */
  background-color: #000;
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  right: -20px;
  left: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
}

.xterm-viewport::-webkit-scrollbar {
  background-color: var(--dark);
  width: 5px;
}

.xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--highlight);
}

.xterm .xterm-screen {
  position: relative;
  width: 100% !important;
  height: 100% !important;
}

.xterm .xterm-screen canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
}

.xterm .xterm-scroll-area {
  visibility: hidden;
}

.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999em;
  line-height: normal;
}

.xterm {
  cursor: text;
}

.xterm.enable-mouse-events {
  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
  cursor: default;
}

.xterm.xterm-cursor-pointer {
  cursor: pointer;
}

.xterm.column-select.focus {
  /* Column selection mode */
  cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  color: transparent;
}

.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.xterm-dim {
  opacity: 0.5;
}

.xterm-underline {
  text-decoration: underline;
}

<script src="https://cdn.jsdelivr.net/npm/xterm@4.15.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>

<div class="table-responsive codeRunCon" id="codeRunCon">
  <div id="terminal"></div>
</div>

Answer 1

你的逻辑有点过于复杂了。
更改仅在最后 else if

var term = new Terminal({
    cursorBlink: "block"
});

var curr_line = '';
var entries = [];
var currPos = 0;
var pos = 0;

term.open(document.getElementById('terminal'));
term.prompt = () => {
    term.write('\n\r' + curr_line + '\r\n\u001b[32m~$>> \u001b[37m');
};
term.write('#Terminal');
term.prompt();

term.onKey(function (key) {
    const printable = !key.altKey && !key.altGraphKey && !key.ctrlKey && !key.metaKey &&
        !(key.key === ' ' && term._core.buffer.x < 6);
    if (key.key === '\r') { // 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;
            term.prompt();
        } else {
            term.write('\n[2K\r\u001b[32m~$>> \u001b[37m');
        }
        curr_line = '';
    } else if (key.key === '\x7F') { // Backspace\
        if (term._core.buffer.x > 5) {
            curr_line = curr_line.slice(0, term._core.buffer.x - 6) + curr_line.slice(term._core.buffer.x - 5);
            pos = curr_line.length - term._core.buffer.x + 6;
            term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
            term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
            if (term._core.buffer.x == 5 || term._core.buffer.x == curr_line.length + 6) {
                term.write('3[1C')
            }
        }
    } else if (key.key === '\x1B[A') { // Up arrow
        if (entries.length > 0) {
            if (currPos > 0) {
                currPos -= 1;
            }
            curr_line = entries[currPos];
            term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
        }
    } else if (key.key === '\x1B[B') { // Down arrow
        currPos += 1;
        if (currPos === entries.length || entries.length === 0) {
            currPos -= 1;
            curr_line = '';
            term.write('[2K\r\u001b[32m~$>> \u001b[37m');
        } else {
            curr_line = entries[currPos];
            term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);

        }
    } else if (printable && !(key.key === '\x1B[C' && term._core.buffer.x > curr_line.length + 4)) {
        if (key.key != '\x1B[D' && key.key != '\x1B[C') {
            var input = key.key;
            if (key.key == '\t') { // Tab
                input = "    ";
            }
            curr_line += input;
            term.write(input);
            // pos = curr_line.length - term._core.buffer.x + 4;
            // curr_line = [curr_line.slice(0, term._core.buffer.x - 5), input, curr_line.slice(term._core.buffer.x - 5)].join('');
            // term.write('[2K\r\u001b[32m~$>> \u001b[37m' + curr_line);
            // term.write('3['.concat(pos.toString()).concat('D')); //term.write('3[<N>D');
        } else {
            term.write(key.key);
        }
    }
});

.codeRunCon {
  position: absolute;
  left: 0;
  top: 0%;
  width: 50%;
  height: 30%;
  border: none;
  padding-bottom: 0%;
}

.codeRunCon #terminal {
  position: absolute;
  top: 0%;
  left: 0%;
  max-width: 100%;
  height: 100%;
}

.xterm {
  font-feature-settings: "liga" 0;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
  outline: none;
}

.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
  z-index: 5;
}

.xterm .xterm-helper-textarea {
  /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
  position: absolute;
  opacity: 0;
  left: -9999em;
  top: 0;
  width: 0;
  height: 0;
  z-index: -5;
  /** Prevent wrapping so the IME appears against the textarea at the correct position */
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}

.xterm .composition-view {
  /* TODO: Composition position got messed up somewhere */
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

.xterm .composition-view.active {
  display: block;
}

.xterm .xterm-viewport {
  /* On OS X this is required in order for the scroll bar to appear fully opaque */
  background-color: #000;
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

.xterm .xterm-screen {
  position: relative;
}

.xterm .xterm-screen canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.xterm .xterm-scroll-area {
  visibility: hidden;
}

.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999em;
  line-height: normal;
}

.xterm {
  cursor: text;
}

.xterm.enable-mouse-events {
  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
  cursor: default;
}

.xterm.xterm-cursor-pointer {
  cursor: pointer;
}

.xterm.column-select.focus {
  /* Column selection mode */
  cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  color: transparent;
}

.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.xterm-dim {
  opacity: 0.5;
}

.xterm-underline {
  text-decoration: underline;
}

<script src="https://cdn.jsdelivr.net/npm/xterm@4.15.0/lib/xterm.min.js"></script>

<div class="table-responsive codeRunCon" id="codeRunCon">
  <div id="terminal"></div>
</div>

当前行结束后的新行导致创建新提示

new line after end of current line causing creating of new prompt

javascript

linux

terminal

node.js

xtermjs