1

デフォルトで赤い境界線のあるテキストボックスがあります。

フォーカスがある場合、（：focus）境界線が緑色に変わります。

テキストボックスに1つ以上の文字がある場合、境界線は青に変わります（このjsを使用）

function CheckText()

{

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

    if(elem)

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

}

私が抱えている問題は、ボックスが青に変わった後にボックスからすべての文字を削除すると、ボックスが青のままで赤に戻らないことです。セルに入力した後も、：focusgreenは機能しなくなります。

誰か助けてもらえますか？

これは私のボックスのHTMLコードです：

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

情報：class-sendsubemptyには赤い境界線があります。

javascriptで使いやすい場合は、青と緑の境界線に別々のクラスがあります。

助けてください ：（

4

3 に答える 3

1

私はロリスに同意します。しかし、それは完全には正しくありません。

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

于 2013-01-06T16:05:36.240 に答える
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"; }
}
于 2013-01-06T16:01:30.437 に答える
0

関数CheckTextは次のように変更する必要があります。

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

に：

  {
    if(elem.value.length){ elem.style.borderColor=""; }
    else{ elem.style.borderColor="#36c"; }
  }
于 2013-01-06T15:55:27.763 に答える