Evidenzia il testo inserito dall'utente: HTML, CSS

Question

Ho un paragrafo di testo e una casella di input. L'utente digiterà lo stesso testo nella casella di input come mostrato nel paragrafo.

Desidero colorare evidenziare il testo del paragrafo mentre l'utente lo digita per mostrare il progresso. Non sono sicuro di come lo farei in HTML e CSS.

Il mio pensiero corrente è di avere una sorta di tag (probabilmente span) per ogni parola nel testo. E poi continua ad aggiungere una classe di colore man mano che gli usi entrano nel testo. Mi piacerebbe sapere se c'è un modo migliore per farlo.

Un esempio potrebbe essere alcuni dei siti di battitura http://www.typingtest.com/

Answer 1

Questo è meglio utilizzato in JavaScript/jQuery. Ecco un esempio di implementazione

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

 
$("textarea").on("keyup", function() { 
 
    var enteredText = $("textarea").val(); 
 
    var length = enteredText.length; 
 
    if (originalText.search(enteredText) == 0) { 
 
    \t $("#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>

Si desidera memorizzare il valore del paragrafo in una variabile al di fuori della funzione.

Quindi si desidera ascoltare la funzione keyup e ottenere l'input immesso dall'utente. Trova se si verifica nella stringa originale, quindi modifica l'html della stringa originale.

Inseriremo una classe per evidenziare l'input digitato in caso di corrispondenza esatta. Quindi aggiungeremo il resto della stringa senza stile.