Question

I need to change the class of the input based on text value. When the value is empty it should be default, when there is a value it should change the class to inputtext.

<style>
    .inputnotext{ background:#ddd; }
    .inputtext{ background:transparent } /* when their is text */
</style>

<form>
    <input class="inputnotext" type="text" name="firstname" /><br />
    <input class="inputnotext" type="text" name="lastname" />
</form> 

<script>
    /* script to write ??? */
</script>

Answer 1

This is a javascript which you can use:

var input = document.getElementsByTagName('input');

keyupHandler = function(input){
    if (input.value.length){
        input.setAttribute('class', 'inputnotext');
    }
    else {
        input.setAttribute('class', '');
    }
}

for (i=0; i<input.length; i++){
    input[i].onkeyup = function(){
        keyupHandler(this);
    }
    input[i].onchange = function(){
        keyupHandler(this);
    }
}

jsFiddle example

Up-to-date version (using event listener and classList):

var input = document.getElementsByTagName('input');

input.addEventListener('keyup', (e) => {
    e.target.classList.toggle("inputnotext", e.target.value );
});

jsFiddle example