Question

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

我希望在用户输入段落文本时突出显示段落文本，以便显示进度。我不确定我是如何用HTML和CSS做的。

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

一个例子是一些打字网站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。

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

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

1 个答案: