用户输入的文本高亮显示 - HTML，CSS

Question

我有一个文本段落和一个输入框。用户将在输入框中输入与段落中显示的相同的文本。

我想在用户输入时对段落文本进行颜色突出显示，以显示进度。我不确定如何在HTML和CSS中实现它。

我的当前想法是为文本中的每个单词都有某种标记（可能是span）。然后随着用户输入文本，不断添加颜色类。我想知道是否有更好的方法来做到这一点。

一个例子是一些打字网站http://www.typingtest.com/。

- sublime

---

也许一些展示您想要实现的内容类型的示例图像会有所帮助，让我们更加清楚？但我会说Ajax和CSS。 - Martin

这是一个很好的例子，非常类似于我正在尝试做的事情。http://www.typingtest.com/ - sublime

抱歉，那个链接对我来说无法使用。当您使链接正常工作并将其添加到问题中时，这会使所有内容更加清晰易懂，谢谢。 - Martin

在这种情况下，简单地将文本转换为字符数组，并使用键盘事件来触发数组与输入字符串之间的模式匹配。 - marblewraith

马丁，我在问题中添加了它，还在我的评论中提到了它。 - sublime

如果您想基于每个单词进行检查，那么只需根据空格字符进行切割。 - marblewraith

Answer 1

这更适用于JavaScript/jQuery。以下是一个示例实现：

var originalText = $("#user-text").text();

$("textarea").on("keyup", function() {
    var enteredText = $("textarea").val();
    var length = enteredText.length;
    if (originalText.search(enteredText) == 0) {
    $("#user-text").html("<span class='highlight'>" + originalText.slice(0, length) + "</span>" + originalText.slice(length, originalText.length));
    }
});

.highlight {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea></textarea>

<p id="user-text">This is a paragraph</p>

你想将段落的值存储在函数外的变量中。

然后，你希望监听keyup函数并获取用户输入。查找它是否出现在原始字符串中，然后更改原始字符串的html。

如果有精确匹配，我们将插入一个用于突出显示输入的类。然后，我们将附加其余的字符串而没有样式。

- Richard Hamilton