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

【问题标题】：How do I change the border color of an input text when user types in用户输入时如何更改输入文本的边框颜色
【发布时间】：2013-10-28 16:16:14
【问题描述】：

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

element.className= 'recordInputEdited';

但是，它无法摆脱 :focus 样式，新类在文本框失去焦点之前是可见的。有什么想法吗？

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

使用 css 你可以：

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

【讨论】：