Question

我对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>

提前致谢

Answer 1

使用css方法，因为backgroundcolor不是属性。

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

Answer 2

试用此代码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");
        }
    });
});

Answer 3

$(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

文本元素背景颜色变化

3 个答案: