javascript - ユーザーが入力したときに入力テキストの境界線の色を変更するにはどうすればよいですか

Question

境界線の色は、現在入力されている値によって異なります。onkeypress イベントが発生したときに javascript を使用して入力テキストの className を変更しようとしましたが、

element.className= 'recordInputEdited';

ただし、:focus スタイルを取り除くことはできません。新しいクラスは、テキスト ボックスがフォーカスを失うまで表示されます。何か案が？

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;
}