Dynamically modifying TextField value - Javascript - change color

Question

I am dynamically modifying a textfield using Javascript by adding some extra character (say X). For this I use:

document.forms['Form1'].elements['some_field'].value = document.forms['Form1'].elements['some_field'].value + "X";

But can I change the color of "X"? Like have it insert (say) a Red colored "X".

possible duplicate of formating part of text inside a textfield — Felix Kling
– Felix Kling, Commented Nov 7, 2011 at 1:52
Just the X? I don't believe so. You could put something next to the field, though. — Dave Newton
– Dave Newton, Commented Nov 7, 2011 at 1:52
Yes. Essentially I am adding some noise to the textfield and want it to be displayed in a different color. @Felix: I think this is different, since I am adding text dynamically using JS. — Hari
– Hari, Commented Nov 7, 2011 at 1:54
It's still not possible ;) Whether the value is static or dynamic does not matter. — Felix Kling
– Felix Kling, Commented Nov 7, 2011 at 1:55
@Titan How it gets there isn't really relevant, I just don't think you can do that with a text input. — Dave Newton
– Dave Newton, Commented Nov 7, 2011 at 1:55

Will · Accepted Answer · 2011-11-07 02:17:10Z

2

You can use a contenteditable span and make it look like a text box.

HTML:

<span contenteditable="true" id="main"></span>

JavaScript:

document.getElementById("main").innerHTML += "<span style=\"color:red\">X</span>";

(optional) CSS Styling

#main {
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    height: 20px;
    width: 160px;
}

answered Nov 7, 2011 at 2:17

Will

20.4k7 gold badges49 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1