动态修改TextField值 - Javascript - 更改颜色

Question

我通过添加一些额外的字符（比如X）动态修改文本字段。为此，我使用：

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

但我可以改变“X”的颜色吗？就像它插入（说）一个红色的“X”。

Answer 1

您可以使用contenteditable范围并使其看起来像文本框。

HTML：

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

JavaScript的：

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

（可选）CSS样式

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

演示：http://jsfiddle.net/TnUQW/