的JavaScript更改多個輸入背景顏色

Question

我有大約120輸入

<input type="text" /> 

我要填補其中的一些使用一些文本，而其他人將是空的。 有什麼辦法可以使用提交按鈕，使所有空輸入改變背景顏色？ 任何幫助將不勝感激。

Answer 1

它可以很容易地使用jQuery，如果你喜歡做。這裏是使用javaScript和jQuery的解決方案。

HTML：

<input type="text" /> 
<input type="text" /> 
<input type="text" /> 
<input type="text" /> 
<input type="text" /> 

<input type="button" id="submitButton" value="Submit" /> 
//for javaScript 
<!-- <input type="button" id="submitButton" value="Submit" onclick="validateField();" /> --> 

JavaScript的：

function validateField(){ 
    var textFields = document.getElementsByTagName("input"); 
     for(var i=0; i < textFields.length; i++){ 
     if(textFields[i].type == "text" && textFields[i].value == "") 
     { 
      textFields[i].style.backgroundColor = "red"; 
     } 
     else { 
      textFields[i].style.backgroundColor = "white"; 
     } 
    } 
} 

的jQuery：

$("#submitButton").click(function(){ 
    $("input").each(function(){ 
     if($(this).attr("type") == "text" && $(this).val() == "") 
     { 
      $(this).css("background-color", "red"); 
     } 

     else { 
      $(this).css("background-color", "white"); 
     } 
    }); 
}); 

javaScript Demo

jQuery Demo

Answer 2

這應該工作：

function verifyInputs() { 
    var inputs = document.querySelectorAll('input'); 
    for (var i=0; i<inputs.length; i++) { 
     if (inputs[i].type == 'text' && inputs[i].value == "") { 
      inputs[i].style.backgroundColor = 'red' 
     } 
    } 
} 
// This should be triggered on dom load/window load or in case when you want to check and mark the inputs with color 
verifyInputs(); 

Click here for JSFIDLE demo