Highlight user-entered text - HTML, CSS

Question

I have a text paragraph and an input field. The user enters the same text in the input field, as shown in the paragraph.

I want the color to highlight paragraph text when a user types it in to show progress. I am not sure how to do this in HTML and CSS.

My real thinking is that for every word in the text there is some kind of tag (possibly span). And then continue to add the color class as using input text. I would like to know if there is a better way to do this.

an example is a set of sites http://www.typingtest.com/

Answer 1

This is best used in JavaScript / jQuery. Here is an example implementation

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> 

You want to save the paragraph value in a variable outside the function.

Then you want to listen to the keyup function and get user input. Find if this is happening in the source line, and then change the html of the source line.

We will insert a class to highlight the input, if there is an exact match. Then we add the rest of the line without styling.