javascript - 如何根据文本框的值更改边框颜色？使用 javascript

Question

我有一个默认为红色边框的文本框。

聚焦时， (:focus) 边框变为绿色。

当文本框中有1个或多个字符时，边框变为蓝色（使用此js）

function CheckText()

{

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

    if(elem)

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

}

我遇到的问题是，如果我在盒子变成蓝色后从盒子中删除所有字符，它会保持蓝色并且不会变回红色。输入单元格后， :focus green 也不再起作用。

任何人都可以帮忙吗？

这是我的盒子的 HTML 代码：

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

信息：class-sendsubempty 有一个红色边框。

如果在 javascript 中更容易使用，我有单独的蓝色和绿色边框类。

请帮忙 ：（

Answer 1

这是实现此效果的更优雅的方法：

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

Answer 2

我同意洛里斯的观点。但这并不完全正确。

function CheckText()

{

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

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

}

这是 jsbin：http: //jsbin.com/welcome/70238/edit

Answer 3

函数 CheckText 应更改为：

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

至：

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