How To Change Form Background Color On Focus Loss When Text Is Entered?

First I would like to point out that all of this is client side, not web based whatsoever. I need to have the form boxes change to green after focus loss when text has been input.

Solution 1:

blur is what you are looking for.

document.write("<input type='text'>");
var input = document.querySelector('input');
input.addEventListener('focus',function(){
  input.style.backgroundColor = "purple";
})
input.addEventListener('blur',function(){
  if(input.value != ""){
      input.style.backgroundColor = "green";
  }
})

Solution 2:

Here is a quick jsfiddle using Jquery:

https://jsfiddle.net/37dw6e3u/

using the jquery .blur function:

$("input").blur(function(){
    $(this).css("background-color", "green")
});

(there is no check if the user actually added text so you could write that yourself), you could use .focus to change the color on focus.

I would like to say that a very quick google search on this problem would turn up a huge amount of solutions to your problem. Try to fix it yourself first next time!