如何檢測是否輸入了兩個輸入元素，如文本字段。（php/javascript）

Question

如果表單中的兩個輸入元素（例如文本字段）可以說用戶名和密碼，獲得長度大於0的文本輸入，你將如何創建一個事件來改變提交按鈕的顏色，當用戶在這兩個字段中輸入時？

Answer 1

document.getElementById('submit').onclick = function() { 
    var inputs = document.getElementsByTagName('input'), 
     empty = 0; 

    for (var i = 0, len = inputs.length - 1; i < len; i++) { 
     empty += !inputs[i].value; 
    } 
    if (empty == 0) { 
     //write code for changing the button color 
    } 
}; 

Answer 2

我喜歡上面的答案，這裏是一個jQuery的答案，如果你喜歡看起來更好！

$(document).ready(function() { 
    $("#username").change(checkFunction()); 
    $("#password").change(checkFunction()); 
} 
function checkFunction() { 
    var user = $("#username").val(); 
    var pass = $("#password").val(); 
    if (user && pass) { 
     $("#buttonid").css("background-color:#HEXCODE"); 
    } 
} 

Answer 3

製作一個javascript函數，用於檢查兩個輸入的值是否大於零，如果他們這樣做，則在調用時會更改提交按鈕的顏色。

在輸入標籤中使用onChange屬性，並將javascript函數的名稱放在屬性中。

您還可以通過執行

Object.onChange = functionToCall(); 

的onChange觸發它的設置，只要輸入值發生變化的功能設置的屬性。

Answer 4

如果您在項目中擁有jQuery的，你可以嘗試這樣的事：

假設你的投入有ID：

<input id="username" name="username"/> 
<input id="password" name="password"/> 
<input type="submit" value="Submit" id="submit" /> 

您可以綁定到keyup事件中任一輸入元素來改變上按鈕的顏色：

$('#username, #password').keyup(function(){ 
    if ($.trim($('#username').val()) != '' && $.trim($('#password').val()) != '') { 
     $('#submit').css('background-color', 'red'); 
    } 
}); 

Answer 5

這裏是正在運行的小提琴：

http://jsfiddle.net/NS5z6/

HTML：

<input type=text id=username /> 
<input type=password id=password /> 
<input type=submit id=submit /> 

CSS：

#submit{ background-color: red; } 

JS：

$('input[id="username"], input[id="password"]').change(function(){ 
    if ($(this).val()!="") 
    { 
     $("input[id='submit']").css("background-color","green"); 
    }else{ 
     $("input[id='submit']").css("background-color","red"); 
    } 
}); 

Answer 6

您可以使用下面的邏輯

<input type = "text" name = "username" class = "text"> 
    <input type = "password" name = "password" class = "text"> 
    <input type = "button" class = "button"> 
    <script> 
    $(".text").live("keyup", function(){ 

     var filled = true; 

     $(".text").each(function(i, v){ 
      if($(this).val() == ''){ 
      filled = false 
      } 
     }); 

     if(filled){ 
     $(".button").css("background-color:#black"); 
     } 
    }); 
    </script>