Question

我正在尝试在HTML，CSS和JS中创建一个“基于Web的终端”，但我在使用<span>创建的粗白光标时遇到了一些问题。基本上，我试图让用户点击终端外部后光标停止闪烁，并在用户点击终端内部后再次闪烁。但是，当用户点击终端时会出现问题。 Javascript中的setTimeout()似乎停止工作，当您点击终端时光标只闪烁一次。以下是我的代码：

// Javascript

'use strict';

class Cursor {
  constructor() {
    this.page = document.querySelector(".js-body");
    this.cmd = document.querySelector(".js-console");
    this.cursor = document.querySelector(".js-cursor");

    this.flashCursor = this.flashCursor.bind(this);
    this.showCursor = this.showCursor.bind(this);
    this.hideCursor = this.hideCursor.bind(this);

    this.cursorVisible = false;
    this.cursorFocus = true;

    this.flashCursor();
    this.addEventListeners();
  }

  addEventListeners() {
    this.page.addEventListener('click', this.hideCursor);
    this.cmd.addEventListener('click', this.showCursor);
  }

  flashCursor() {
    if (this.cursorVisible) {
      this.cursor.classList.remove('cursor--visible');
      this.cursorVisible = false;
    } else {
      this.cursor.classList.add('cursor--visible');
      this.cursorVisible = true;
    }

    this.cursorTimeout = setTimeout(this.flashCursor, 500);
  }

  showCursor() {
    if (this.cursorFocus)
      return;
    this.cursorFocus = true;
    this.flashCursor();
  }

  hideCursor() {
    if (!this.cursorFocus)
      return;
    this.cursorFocus = false;
    clearTimeout(this.cursorTimeout);
  }
}

new Cursor();

/**
 * CSS
 */

body {
  background-color: #1A237E;
  background: #1A237E url("https://yikjin.ml/cmd/img/main-bg.jpg") center no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  color: #E0E0E0;
  font-family: monospace;
  font-size: 15px;
  height: 100vh;
  position: relative;
}
.console {
  background-color: rgba(0, 43, 54, 0.75);
  padding: 25px;
  width: 750px;
  max-width: 100%;
  height: 90%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: auto;
}
.console p {
  width: 100%;
  min-height: 20px;
  line-height: 20px;
  margin: 0;
}
/**
 * Prevent selection in .console__cmd
 */

.console__cmd {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/**
 * Cursor visibility
 */

.cursor {
  display: inline-block;
  background-color: transparent;
  width: 10px;
}
.cursor--visible {
  background-color: #E0E0E0;
}
/**
 * Highlight colors
 */

*::selection {
  background-color: #E0E0E0;
  color: #000;
}
*::-moz-selection {
  background-color: #E0E0E0;
  color: #000;
}

/**
 * Text colors
 */

span.text-version {
  color: #2196F3;
}
span.text-ip {
  color: #E91E63;
  font-weight: bold;
}
span.text-location {
  color: #7E57C2;
  font-weight: bold;
}

<!-- HTML -->

<body class="js-body">
  <div class="js-console console">
    <p>Command Prompt
      <span class="text-version">[Version 1.0]</span>
    </p>
    <p>(c) 2016 Yik Jin. All rights reserved.</p>
    <p></p>
    <p>Type in a command to begin.</p>
    <p></p>

    <div class="console__cmd">
      <span>
        <span class="text-ip">me</span>@<span class="text-location">localhost</span>
      ~$
      </span>
      <span class="text"></span>
      <span class="js-cursor cursor">&nbsp;</span>
    </div>
  </div>
</body>

您可能需要查看整页结果。 Here's the JSFiddle link。任何帮助将不胜感激！

Answer 1

看起来你的点击处理程序都被解雇了，因为允许点击事件传播。这会在启动后立即停止闪烁。在每个方法上添加一条console.log（）消息，看看发生了什么。

尝试：

showCursor(e) {
   e.stopPropagation();
   ...
}

hideCursor(e) {
   e.stopPropagation();
   ...
}

我还建议使用setInterval（）和clearInterval（），它们是内置的，用于以指定的时间间隔调用事件，因此您不必在每次调用时重新计划超时。

Answer 2

您应该使用<textarea>或<input>，而不是使用带有CSS的<span>。

<span>光标未按预期工作

2 个答案: