Question

I have a textbox which has a red border as default.

when on focus, (:focus) the border turns green.

When there is 1 or more characters in the textbox, the border turns blue (using this js)

function CheckText()

{

    var elem = document.getElementById('sendto');

    if(elem)

      {      
      if(elem.value.length != 0)
      elem.style.borderColor = '#3366CC';
      }

}

the problem I have is, if I delete all the characters from the box after it has turned blue, it stays blue and does not return to red. the :focus green does not work anymore either after typing in the cell.

Can anyone help?

this is the HTML code for my box:

<input id="sendto" name="sendto" type="text" class="sendsubempty" onBlur="CheckText()" value="<? 
  if(!$sendto){ 
  echo"";
  }else{
  echo"$sendto";
  }
  ?>" maxlength="50" />

for info: class- sendsubempty has a red border.

I have seperate classes for blue & green borders if its easier to use in the javascript.

Please help 🙁

Answer 1

Here is a more elegant way to achieve this effect:

http://jsfiddle.net/elias94xx/eqKqS/

HTML

<textarea id="test"></textarea>

CSS

#test { border-color: red; }
#test:focus { border-color: green !important; outline: none; }

JS

document.getElementById("test").addEventListener("keydown", controlBorderColor, false);
document.getElementById("test").addEventListener("keyup", controlBorderColor, false);

function controlBorderColor() {
  if (this.value.length == 0) { this.style.borderColor = "red"; }
  else { this.style.borderColor = "blue"; }
}