如何根據輸入文字更改班級名稱

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