Live spell checking as you type ( custom words)

Hello ,
After long time researching i did not succeed in finding a solution to what i need.
When i type in “myTextarea” (id) i want to color the letters in green which are right and in red which are wrong according to the word at the top , (automatically).
I cannot and dont want to use the dictionary library like jquery spellcheck , because i want to use custom(prescribed) words.
I created fake animation of that , so you can understand what i mean.

live type check (custom words) (18.8 KB)

Hi Shmuel (@shmuel1994)

Here is something to get you going.It’s not 100% what you were asking but I’ll leave it for you or someone else to chime in and complete. (22.7 KB)

Basically, on scene load I’m calling a function to make the element content editable and then listen for the keypress and keyup events. On keypress I’m checking the length using a max attribute and then preventing more input and on keyup I’m checking the innerHTML for the word “Mother” if it’s correct I change the color to green, if it’s not I keep / change it to red.

The difficult part is checking the individual characters. You can use this.innerHTML.charAt(position) where position is the index of the editable area (this.innerHTML.charAt(0) would equal “M” in our example) to check if it matches but you can’t use the same code to change the color unfortunately.

So i played around and this is what i come up with ,
it is complicated way but kind of works.
I have a small bug that after deleting i cannot get to type again.
Another thing which i tried but not succeeded was .

function setFocusToTextBox(){

Maybe using this would be the easiest option.

<div contenteditable>
    ST<span style="color: red">A</span>CK OVERFLOW

Anyway , this is what i did (would be nice to do autoswitch-focus between textboxes after correct value)
live-type-check-vDBear (complicated way) (20.5 KB)