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

如何根据输入文本更改类名

3 个答案: