Change color of text box when start typing in it rather than click

Question

I am working on a site where I am creating a form and validating it with JavaScript . Everything is going well but I have an issue.

When a user leaves a field empty and clicks on the submit button, the form shows an error, changes the color of the text box, and the cursor is automatically focused on that field.

However, I want that when the user starts typing in the field the color of the field automatically turns back to its default state. I want this work to be done in JavaScript . Please help me I am not getting any logic for this.

Thank you

Answer 1

使用onkeydown()代替onclick()事件。

Answer 2

This code may work:

This code may work:

<textarea id="txtId" onkeydown="changeColor()"></textarea>
<script>
  function changeColor(){
    document.querySelector("#txtId").style.backgroundColor="defaultcoloryouwant";
  }
</script>

Answer 3

You can do it in this way:

var textinput= document.getElementById("textinput");

textinput.onchange = function() {

    if(textinput.value == "")
    {
        textinput.style.backgroundColor = "red";
    }
    else
    {
       textinput.style.backgroundColor = "green"; 
    }
};