Change Text Color if match found automatically JavaScript|HTML

Question

i have a textarea where i want to change color automatically

for example : this is my pen my friend

as soon as i enter the above text the keyword=pen should become green color and keyword=freind should become red as soon it matches

How do i achieve this thing

code is working but half working

function changeText() 
{
        document.getElementById("text").style.color ="green";
}
</script>

Another Code i have But not Working

 var str = 'Connect'; 
    var value = str.includes('Connect'); 

    if(value==str)
    {
        document.getElementById("text").style.color ="green"; 
    }
    else
    {
        document.getElementById("text").style.color ="red";
    }

simple debug statement: `console.log(value, str, value==str)` — epascarello, May 10 '19 at 19:44

score 1 · Answer 1 · answered May 10 '19 at 19:38

1

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input, not just a word.

see for more info: Multicolor Text Highlighting in a Textarea or Text Input

answered May 10 '19 at 19:38

Farhan

887
6
13

You could if you spoofed a textbox with a standard div. Like how selectize.js spoofs select boxes. – Kai Qing May 10 '19 at 19:43
the guy is a novice, would be difficult for him to get this is I suppose – Farhan May 10 '19 at 19:48
Definitely. And not our job to code out for them. Your statement is correct though so I'll plus that. – Kai Qing May 10 '19 at 19:49

score 0 · Answer 2 · answered May 10 '19 at 19:26

0

First, you'll need to detect changes on the text area. Look into element.addEventListener() and the change event. Then inspect the text from the text area. You have bunch of options for this, but the easiest one is string.includes(). If it returns true, call your function to turn the text green.

answered May 10 '19 at 19:26

Joseph

117,725
30
181
234

as i am new to javascript can anyone provide demo code – May 10 '19 at 19:28

Change Text Color if match found automatically JavaScript|HTML

2 Answers2

Linked