CODEWITHSUNDEEP
javascripthtmlcss
Leo
Leo

Reputation: 1919

How do I change the border color of an input text when user types in

the border color will be depending on the current typed value. I've tried to change the className of the input text using javascript when onkeypress event happens, 

element.className= 'recordInputEdited';

however, it cannot get rid of the :focus style, the new class is visible until the text box loses focus. any idea?

Upvotes: 0

Views: 2372

Answers (2)

chris
chris

Reputation: 4867

with css you simply can:

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

Upvotes: 1

kelunik
kelunik

Reputation: 6908

This should work: 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;
}

Upvotes: 1

Related Questions