Emphasize user-entered text using HTML and CSS

Question

Emphasize user-entered text using HTML and CSS

Here's a scenario: a text paragraph is displayed alongside an input box. The user must type the same text into the input box as shown in the paragraph.

I'm aiming to highlight the paragraph text in color as the user types, to demonstrate progress. However, I'm uncertain about how to accomplish this using HTML and CSS.

My current strategy involves using a tag (likely a span) for each word in the text. Then, as the user enters the text, I would continuously add a color class. If there exists a more effective method of achieving this, I would greatly appreciate any insight.

An illustrative example can be seen on typing practice websites such as

html css

Answer 1

Answer №1

To optimize functionality, it is recommended to use this code snippet in JavaScript/jQuery. Here is a practical example of how you can implement it:

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>

The key to efficiently executing this script is storing the paragraph value in a variable outside the function.

By monitoring the keyup event, you can capture user input and compare it with the original text. If there's an identical match, update the HTML accordingly.

This implementation also includes a highlighting feature for matching text. The remaining portion of the content will be displayed without any formatting changes.

Answer 2

To optimize functionality, it is recommended to use this code snippet in JavaScript/jQuery. Here is a practical example of how you can implement it:

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>

The key to efficiently executing this script is storing the paragraph value in a variable outside the function.

By monitoring the keyup event, you can capture user input and compare it with the original text. If there's an identical match, update the HTML accordingly.

This implementation also includes a highlighting feature for matching text. The remaining portion of the content will be displayed without any formatting changes.

Emphasize user-entered text using HTML and CSS

Answer №1

Similar questions

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

Discovering checkboxes in HTML using jQuery

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

"Using Bootstrap's toast feature repositions every element on the

Modify the design of the button in the CSS code

What is the best way to showcase just 5 photos while also incorporating a "load more" function with

Black textures with images sourced from the same domain - Cross-origin

Display issues with React styled components preventing proper rendering on the screen

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

The floating label appears distorted when used with a datalist input in Bootstrap 5

What is the maximum length for the string that can be passed to jQuery's .append() method?

Creating a Collage with Varied Image Sizes

Shifting the image below the text for mobile display

How do I create a clean HTML file when using the email editor with TinyMCE?

Struggling with organizing the layout of your HTML page? Let us lend

The website is displaying a strange mix of text and HTML when viewed on a PC

Restrict certain sections of the website to authorized users only

Mathematics - Determined the dimensions of an adjusted image size

Creating Image Overlays with Hover Effects using CSS and PHP Conditions

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item