How to color part of an input field of a wtform flask

Question

I am developing a flask app. I have a flask form and I am trying to color only part of an input field. The idea is that I would get two indices that will represent the start and end of the substring in an input field that I need to color.

My code is as follows:

The inputField:

review = TextAreaField('Review', validators=[DataRequired()])

The HTML:

<p>
    {{ form.prompt.label }}<br>
    {{ form.prompt(size=32) }}
</p>

Using Chrome's inspector (Ctrl + Shift + I):

<p>
    <label for="review">Review</label><br>
    <textarea id="review" name="review" required="" size="32">This is a test case</textarea>
</p>

The JavaScript function:

<script>
    var label = document.getElementById('review');
    var sub = label.innerHTML;
    label.innerHTML = label.innerHTML.replace(sub.substring(0,2), '<span style="color:red;">'+sub.substring(0,2) '+'</span>');
</script>

This function however does not style the text. It instead fills the text box with

"<span style="color:red;">'+sub.substring(0,2) '+'</span>".

What would be a good way to resolve this issue?

Colouring part of a string of an input field is not trivial. Here is an [answer](https://stackoverflow.com/questions/45233743/javascript-how-to-change-color-to-only-part-of-the-string-in-an-input-field) which does exactly what you want JS-wise. I'd reconsider if you really need this feature. — Joost, Jun 21 '19 at 11:34
That answer predefines the number of spans we would need. In my case, I might need to color multiple portions of the text. It depends on the output of the function that provides me indices and colors. It would give me a list of lists where each list shows the start index, end index and the color. So there could be multiple regions of the text I would need to color. It depends on what the user enters in the input field. — Hammad Hassan, Jun 21 '19 at 18:01

How to color part of an input field of a wtform flask

0 Answers0