उपयोगकर्ता द्वारा दर्ज किए गए टेक्स्ट को हाइलाइट करें - एचटीएमएल, सीएसएस

Question

मेरे पास एक टेक्स्ट पैराग्राफ है, और एक इनपुट बॉक्स है। पैराग्राफ में दिखाए गए अनुसार इनपुट बॉक्स में उपयोगकर्ता एक ही टेक्स्ट टाइप करने जा रहा है।

मैं पैराग्राफ टेक्स्ट को हाइलाइट करना चाहता हूं क्योंकि उपयोगकर्ता प्रगति दिखाने के लिए इसे टाइप करता है। मुझे यकीन नहीं है कि मैं इसे HTML और CSS में कैसे करूं।

मेरी वर्तमान सोच टेक्स्ट में प्रत्येक शब्द के लिए कुछ प्रकार का टैग (संभवतः स्पैन) होना है। और तब टेक्स्ट रंग में प्रवेश के रूप में रंग वर्ग जोड़ना जारी रखें। मैं जानना चाहता हूं कि ऐसा करने का एक बेहतर तरीका है या नहीं।

एक उदाहरण टाइपिंग साइटों http://www.typingtest.com/

Answer 1

यह बेहतर जावास्क्रिप्ट/jQuery में उपयोग किए गए कुछ होगा। यहाँ एक उदाहरण दिया गया

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>

आप समारोह के बाहर एक चर में अनुच्छेद का मूल्य संग्रहीत करना चाहते है।

फिर आप keyup फ़ंक्शन के लिए सुनना चाहते हैं और उपयोगकर्ता द्वारा दर्ज इनपुट प्राप्त करना चाहते हैं। खोजें कि यह मूल स्ट्रिंग में होता है, और फिर मूल स्ट्रिंग के HTML को बदलें।

यदि कोई सटीक मिलान है तो हम टाइप किए गए इनपुट को हाइलाइट करने के लिए एक कक्षा डालेंगे। इसके बाद हम बाकी स्ट्रिंग को स्टाइल के साथ जोड़ देंगे।