2

inm trying to make basically a typing speed webpage.

So the user needs to type a sentence as fast as they can. But i want to check for any wrong letters in an input field. If its wrong, the letter should highlight red.

The thing is I dont know how to highlight just 1 letter in a input field element.

In case someone doesnt understand, lets say the user needs to copy the sentence below

Hello World

But they write: Gello World

It should highlight in red the G since its the wrong letter.

Cris Manrique
  • 83
  • 1
  • 7
  • Im not sure if its possible to do that with an input element, however, if you make it a `contenteditable` div then surround the incorrect letter with a `span` element of color red that would work – Sean Jun 23 '20 at 00:50
  • How would you wrap one letter in a span though? I had thought of doing that but I dont know how to write that in code – Cris Manrique Jun 23 '20 at 00:51
  • Do you want to use a library or just pure javascript? – Sean Jun 23 '20 at 02:51
  • I just wqnt to use pure JS – Cris Manrique Jun 23 '20 at 04:31
  • Here is the same question and there are acceptable answers for it. https://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css – Kavindu Pasan Kavithilaka Jun 23 '20 at 04:40
  • @KavinduPasanKavithilaka that isn't the same question, that one is asking how to change a character in which the answers are using pure html, this question is asking how to do it through javascript when the content editable is changed when not matching a string that can change – Sean Jun 23 '20 at 12:46

0 Answers0