How to change bordercolor based on value of textbox? using javascript

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 :(

user625860 · Accepted Answer · 2013-01-06 16:01:30Z

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"; }
}

answered Jan 6, 2013 at 16:01

user625860

Sign up to request clarification or add additional context in comments.

3 Comments

user1953045 Over a year ago

1 more question, how can I apply that to 3 input boxes on the same page?

user625860 Over a year ago

Using jQuery would be the easiest way: $(".some_input_boxes").on("keydown keyup", controlBorderColor);, otherwise just register more event listensers.

user1953045 Over a year ago

ahhh, ok, Im still learning all of this, but its getting much easier. I understand now. so just register more event listeners and when the relevant box is in focus/active, it will simply call the function for that box as Ive registered the listener....

Benjamin Toueg · Accepted Answer · 2013-01-06 16:05:36Z

1

I agree with Loris. But it's not completely correct.

function CheckText()

{

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

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

}

Here is the jsbin : http://jsbin.com/welcome/70238/edit

answered Jan 6, 2013 at 16:05

Benjamin Toueg

11k7 gold badges50 silver badges81 bronze badges

1 Comment

user1953045 Over a year ago

Brilliant. much easier. I have 3 boxes (username, password & message) I have added 3 versions of the code and simply changed the function name. Is there an easier way to pass the ID as a parameter to the one function? rather than 3 instances of the function code?

Loris · Accepted Answer · 2013-01-06 15:55:27Z

0

The function CheckText should be changed from:

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

to:

  {
    if(elem.value.length){ elem.style.borderColor=""; }
    else{ elem.style.borderColor="#36c"; }
  }

answered Jan 6, 2013 at 15:55

Loris

1

1 Comment

Loris Over a year ago

This is because inline style has higher specificity than external rule

Collectives™ on Stack Overflow

How to change bordercolor based on value of textbox? using javascript

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related