Javascript textarea apply style.color from current location

Question

Is there a way to not apply style.color on the whole textarea but from current key? For instance, "Hello -specialBlueColor- Welcome to my world -specialYellowColor- hope you like it", and define the keywords as specialBlueColor = some specific hex color, or word, and apply them as typing.

I only know how to append style.color on the whole textarea but not specifically as described.

score 0 · Answer 1 · answered Mar 12 '23 at 16:25

0

Possible duplicate of this one. This is not possible as the "color " property will affect the whole text. The provided link will give you a workaround though.

answered Mar 12 '23 at 16:25

SyFi

11
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 16 '23 at 19:14

score 0 · Answer 2 · edited Mar 17 '23 at 21:14

The standard HTML textarea cannot be modified, but you can always create your own text-editing container with a little fine-tuning as demonstrated below, to achieve the colorful effects you desire:

The CSS:

.Con {
    overflow:auto; 
    width:500px; 
    height:100px; 
    border:1px solid black; 
    resize:vertical;
}
    
green {color:green;}
    
blue {color:blue;}
    
red {color:red;}

The HTML:

<div class="Con" spellcheck="false" contenteditable="true">You can 
edit <red>the</red> contents of <blue>this</blue> fake 
colorful textarea...
</div>

Javascript textarea apply style.color from current location

2 Answers2