html - 突出显示用户输入的文本 - HTML、CSS

Question

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

我想在用户键入段落文本时用颜色突出显示它以显示进度。我不确定如何在 HTML 和 CSS 中做到这一点。

我目前的想法是为文本中的每个单词添加某种标签(可能是跨度)。然后在使用输入文本时继续添加颜色类。我想知道是否有更好的方法。

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

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。

如果完全匹配，我们将插入一个类来突出显示输入的内容。然后，我们将附加没有样式的字符串的其余部分。