Выделите текст как введенный пользователем - HTML, CSS

У меня есть текстовый абзац и поле ввода. Пользователь набирает тот же текст в поле ввода, как показано в параграфе.Выделите текст как введенный пользователем - HTML, CSS

Я хочу, чтобы цвет выделял текст абзаца, когда пользователь вводил его, чтобы показать прогресс. Я не уверен, как это сделать в HTML и CSS.

Мое настоящее мышление - иметь какой-то тег (возможно, span) для каждого слова в тексте. И затем продолжайте добавлять класс цвета, поскольку использование вводит текст. Я хотел бы знать, есть ли лучший способ сделать это.

примером может быть несколько опечаток сайтов http://www.typingtest.com/

источник

2016-01-18 sublime

Возможно, некоторые примеры примеров того, что вы пытаетесь достичь, помогут нам увидеть свет? Но я бы сказал Ajax и CSS? – Martin

Вот хороший пример, очень похожий на то, что я пытаюсь сделать. http://www.typingtest.com/ – sublime

Прошу прощения, эта ссылка не работает для меня. Когда вы получите ссылку на работу, вы добавите ее в вопрос? все становится понятнее, ура. – Martin

Это лучше использовать в JavaScript/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 исходной строки.

Мы вставим класс для выделения введенного ввода, если есть точное совпадение. Затем мы добавим остальную часть строки без стилизации.

источник

2016-01-18 22:35:28

Выделите текст как введенный пользователем - HTML, CSS

ответ

Смежные вопросы