如何遍历文本框中的文本？

Question

我正在尝试制作一个打字速度测试计数器。目标是仅当输入正确的字符时才在整个文本中移动闪烁的光标。我无法理解如何浏览文本。然后我会计算所用的分钟数并计算wpm。

function timer() {
  var seconds = 3;
  var element = document.getElementById('timer');
  var timerId = setInterval(countdown, 1000);

  function countdown() {
    if (seconds == -1) {
      clearTimeout(timerId);
      element.innerHTML = "Time Up";
      var value = 1;
      wpm();
    } else {
      element.innerHTML = "Time Left: " + seconds + " " + "seconds";
      seconds--;
    }
  }
}

body {
  font-family: monospace;
}

.title-of-page>h1 {
  text-align: center;
  font-family: monospace;
}

.title-of-page {
  background-color: #414a4c;
  color: #ced3db;
}

.jumbotron {
  margin: 0;
}

.navigation-bar {
  background-color: #46494f;
}

a {
  color: green;
}

.nav>li>a:hover {
  background-color: #878f9b;
}

.navbar-nav>li {
  text-align: center;
  float: none;
  display: table-cell;
}

.navbar-nav {
  display: table;
  width: 100%;
  margin: 0;
}

.navbar {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.typing-field {
  width: 60em;
  height: 8em;
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 15em;
  margin-top: 5em;
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 35em;
  padding-top: 2em;
}

#timer {
  padding-top: 4em;
  padding-left: 10em;
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <div class="jumbotron title-of-page container-fluid">
    <h1>Typing Counter</h1>
  </div>
  <nav class="navbar navigation-bar container-fluid">
    <div class="">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contest</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leaderboard</a></li>
      </ul>
    </div>
  </nav>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
    </div>
    <div class="user-input">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>
</body>

对于javascript，我试图做这样的事情。这主要是错误的。我还是初学者。

window.onload = function wpm() {
  var text = document.getElementById('user-input').innerHTML;
  var i=0;
  document.getElementById('user-input').onkeyup = function() {
    var letter = this.value;
    if(letter==text[i])
    {
      letter.style.color="green";
      i++;
    }
  }
}

Answer 1

如果你想跟踪输入的字母然后将它们变成不同的颜色，你可以将文本字符串保存在一个变量中并通过它排队，将输入的字母转储到另一个数组中，然后将它们合并到输出字段中:

    let textToType = "This is what I want you to type.";
    const typedLetters = [];

    document.getElementById('user-input').addEventListener("keypress", function(event) {
      const key = event.which || event.keyCode;
      const nextLetter = textToType[0].charCodeAt();
      const outputTarget = document.getElementById("display-text");
      
      const greenWrapper = document.createElement("span");
      greenWrapper.classList.add("typed-cursor");

      if (key === nextLetter) {
        typedLetters.push(String.fromCharCode(nextLetter));
        textToType = textToType.substr(1);
        greenWrapper.textContent = typedLetters.join("");
        outputTarget.textContent = textToType;
        outputTarget.prepend(greenWrapper);
        
        
      };
    })

body {
  font-family: monospace;
}

.title-of-page>h1 {
  text-align: center;
  font-family: monospace;
}

.title-of-page {
  background-color: #414a4c;
  color: #ced3db;
}

.jumbotron {
  margin: 0;
}

.navigation-bar {
  background-color: #46494f;
}

a {
  color: green;
}

.nav>li>a:hover {
  background-color: #878f9b;
}

.navbar-nav>li {
  text-align: center;
  float: none;
  display: table-cell;
}

.navbar-nav {
  display: table;
  width: 100%;
  margin: 0;
}

.navbar {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.typing-field {
  width: 60em;
  height: 8em;
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 15em;
  margin-top: 5em;
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 35em;
  padding-top: 2em;
}

#timer {
  padding-top: 4em;
  padding-left: 10em;
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

  <div class="jumbotron title-of-page container-fluid">
    <h1>Typing Counter</h1>
  </div>
  <nav class="navbar navigation-bar container-fluid">
    <div class="">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contest</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leaderboard</a></li>
      </ul>
    </div>
  </nav>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text">This is what I want you to type.
    </div>
    <div class="user-input">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>

Answer 2

这是我对您的代码稍作研究后得到的结果：

var display = document.getElementById('display-text');
var userInput = document.getElementById('user-input');

userInput.onkeyup = function() {
  for (var i = 0; i < userInput.value.length; i++) { // Counts correct letters
    if (display.innerText[i] != userInput.value[i])
      break; // Exit loop if incorrect
  }
  display.innerHTML = '<span style="color: green;">' + display.innerText.substr(0, i) + '</span>' + '<span class="typed-cursor">' + display.innerText.substr(i, 1) + '</span>' + display.innerText.substr(i + 1);
}

body {
  font-family: monospace;
}

.typing-field {
  width: auto;
  /* Modified for snippet */
  height: auto;
  /* Modified for snippet */
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 0;
  /* Modified for snippet */
  margin-top: 0;
  /* Modified for snippet */
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 0;
  /* Modified for snippet */
  padding-top: 0;
  /* Modified for snippet */
}

#timer {
  padding-left: 0;
  /* Modified for snippet */
  padding-top: 0;
  /* Modified for snippet */
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
    </div>
    <div class="user-inputs">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>
</body>

此代码比较显示的和键入的字符串，以绿色突出显示正确的字母并将闪烁的光标放在要键入的字母上。

希望对您有所帮助。 :)

如何遍历文本框中的文本？

How to traverse through text in a textbox?

html

javascript

textbox