如果輸入類型不爲空添加css樣式

Question

我想直接在加載頁面上檢查輸入文本，但沒有在輸入中添加任何東西，他不工作。如何修復它？

<form action=""> 
    <input type="text" id="author" value="Bill"> 
</form> 

$("#author").keyup(function(){ 
    if($(this).val()) { 
     $("#author").addClass("notempty"); 
     /* if input is not empty do background yellow */ 
    } else { 
     $("#author").addClass("empty"); 
     /* else background is red */ 
    } 
}); 

演示http://jsfiddle.net/540dwmcn/

Answer 1

您的代碼設置爲觸發KeyUp事件。爲了在頁面加載時運行它，通過在末尾添加.keyup();手動觸發鍵控。

jsFiddle example

此外，你可能想清除類和（注意在撥弄使用.removeClass()）

$("#author").keyup(function() { 
    if ($(this).val()) { 
     $("#author").removeClass().addClass("notempty"); 
     /* if input is not empty do background yellow */ 
    } else { 
     $("#author").removeClass().addClass("empty"); 
     /* else background is red */ 
    } 
}).keyup(); 

Answer 2

DEMO

$("#author").keyup(function(){ 
    if($(this).val()) { 
     $("#author").addClass("notempty") 
     .removeClass("empty"); 
     /* if input is not empty do background yellow */ 
    } else { 
     $("#author").addClass("empty") 
     .removeClass("notempty"); 
     /* else background is red */ 
    } 
}).keyup();