如何根据输入文字更改班级名称

Question

我需要根据文本值更改输入class。当value为空时，它应该是默认值，当有value时，它应该将类更改为inputtext。

<style> 
    .inputnotext{ background:#ddd; } 
    .inputtext{ background:transparent } /* when their is text */ 
</style> 

<form> 
    <input class="inputnotext" type="text" name="firstname" /><br /> 
    <input class="inputnotext" type="text" name="lastname" /> 
</form> 

<script> 
    /* script to write ??? */ 
</script> 

Answer 1

这是一个JavaScript，您可以使用：

var input = document.getElementsByTagName('input'); 

keyupHandler = function(input){ 
    if (input.value.length){ 
     input.setAttribute('class', 'inputnotext'); 
    } 
    else { 
     input.setAttribute('class', ''); 
    } 
} 

for (i=0; i<input.length; i++){ 
    input[i].onkeyup = function(){ 
     keyupHandler(this); 
    } 
    input[i].onchange = function(){ 
     keyupHandler(this); 
    } 
} 

jsFiddle example

Answer 2

试试下面的代码：

<style> 
     .inputnotext{ background:#ddd; } 
     .inputtext{ background:transparent } /* when their is text */ 
     </style> 

     <form> 
     <input class="inputnotext" type="text" name="firstname" onblur="checkValue(this);"/><br /> 
     <input class="inputnotext" type="text" name="lastname" onblur="checkValue(this);"/> 
     </form> 

     <script> 
     function checkValue(c){ 
      var val = c.value; 
    var id = c.id; 
    if(val.length > 0){ 
    document.getElementById(id).className += "inputtext"; 
    }else{ 
document.getElementById(id).className += "inputnotext"; 

} 
      } 
     </script> 

希望它可以帮助你:-)

Answer 3

你可以做一些事情像这样使用jQuery：

$(document).ready($(input:text[name=firstname]).change(function() { 
    var val = $(input:text[name=firstname]).val() 
    if(val!="") 
    { 
    $(input:text[name=firstname]).removeClass("inputnotext").addClass("inputtext"); 
    }