文字元素背景顏色變化

我對jquery有點新，所以請耐心等待。文字元素背景顏色變化

我正在開發註冊系統並有密碼並確認密碼文本框。我希望設置確認框的背景顏色，只要兩個框的內容發生變化。顏色將基於箱子內容是否匹配。

編輯 - 我原來的代碼根本不改變背景顏色。我希望在用戶輸入時改變它，而不是焦點/模糊。

我的代碼如下。

<input type="password" name="password" id="newpassword"/> 
<input type = "password" name = "confirm" id="confirm"/> 
<input type="submit" value="Register" id="Register"/> 

<script> 
    $(document).ready(function() { 
     $('#password').change(function() { 
      if ($('#newpassword').val().Equals($('#confirm').val())) { 
       $('#confirm').attr("backgroundcolor", "green"); 
       $('#Register').attr("disabled", ""); 
      } else { 
       $('#confirm').attr("backgroundcolor", "red"); 
       $('#Register').attr("disabled", "disabled"); 
      } 
     }); 
     $('#confirm').change(function() { 
      if ($('#newpassword').val().Equals($('#confirm').val())) { 
       $('#confirm').attr("backgroundcolor", "green"); 
       $('#Register').attr("disabled", ""); 
      } else { 
       $('#confirm').attr("backgroundcolor", "red"); 
       $('#Register').attr("disabled", "disabled"); 
      } 
     }) 
</script>

在此先感謝

來源

2013-07-30 DocSmiley

而且？什麼不起作用？錯誤信息？ – Virus721

你面臨什麼問題 –

你在最後留下了'}）;'。 – Neal

$(document).ready(function() { 
    $('#newpassword, #confirm').change(function() { 
     var $n = $('#newpassword'), 
      $c = $('#confirm'), 
      newp = $n.val(), 
      conf = $c.val(); 
     if (newp === conf) { 
      $c.css('background-color', 'green'); 
      $n.prop('disabled', false) 
     } else { 
      $c.css('background-color', 'red'); 
      $n.prop('disabled', true) 
     } 
    }); 
});

希望這是你想要做什麼。

Fiddle

來源

2013-07-30 14:12:14 Spokey

謝謝你這是一個非常優雅的解決方案。但是你禁用了錯誤的元素。它應該禁用註冊按鈕。我已將更改功能更改爲按鍵，這似乎更符合我的要求。 – DocSmiley

@DocSmiley啊我現在看到它，不知道爲什麼我認爲應該禁用newpassword – Spokey

使用CSS的方法，因爲backgroundColor時不是屬性。

$('#confirm').css("backgroundColor", "green");

來源

2013-07-30 14:01:49 Bernhard

backgroundcolor不是CSS屬性。 – Virus721

這只是其中一個問題。 – Archer

這是正確的..寫backgroundColor（它也在jQuery工作） – Bernhard

試試這個代碼http://jsfiddle.net/pQpYX/：

$(document).ready(function() { 
    $('#confirm').keypress(function (event) { 
     if ($('#newpassword').val() == ($('#confirm').val() + String.fromCharCode(event.keyCode))) { 
      $('#confirm').css("background-color", "green"); 
      $('#newpassword').removeAttr("disabled"); 
     } else { 
      $('#confirm').css("background-color", "red"); 
      $('#newpassword').attr("disabled", "disabled"); 
     } 
    }); 
});

來源

2013-07-30 14:03:32 amatellanes

文字元素背景顏色變化

回答

相關問題