当用户输入时，如何更改输入文本的边框颜色

Question

边框颜色取决于当前键入的值。 当onkeypress事件发生时，我试图使用javascript更改输入文本的className，

element.className= 'recordInputEdited';

然而，它无法摆脱：焦点样式，新的类是可见的，直到文本框失去焦点。任何想法？

Answer 1

这应该有效：http://jsfiddle.net/GQSsw/

HTML：

<input id="element" />

使用Javascript：

document.getElementById('element').onkeydown = function() {
    this.className= 'edited';
}

CSS：

input {
    border: 1px solid red;
}

input:focus {
    border: 1px solid green;
}

input.edited {
    border: 1px solid yellow;
}

Answer 2

用css你可以：

input:focus {
    border:1px solid red;
}