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.
Thanks.
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(){
document.getElementById("mytext").focus();