如果字段值与字符串匹配，则显示div

Question

我需要帮助，我希望在用户为字段键入正确值时显示div，例如（"ThePassword"）。到目前为止，我拥有的是：

<input type="text" name="vip-code" id="vipcode" value="" />
<div id="container" style="display:none;"></div>
<script>
$(function () {
var validcode = "ThePassword";
$("#vipcode").focusout(function () {
    $(this).keyup(function () {
        var code = $(this).val();
        if (this === validcode) {
            $("#container").css("display", "block");
        } else {
            $("#container").css("display", "none");
        }
    });
});
});
</script>

有什么想法吗？

提前谢谢。

Answer 1

不确定句柄keyup事件是否正确，但问题是：您正在将validcode与输入字段vip-code而不是code变量进行比较。。。

if (code === validcode) {
    $("#container").css("display", "block");
} else {
    $("#container").css("display", "none");
}

Answer 2

在您的代码中，只有当vipcode输入失去焦点时，您才能绑定到keyup事件，因此keyup事件很有可能永远不会被触发。同样值得注意的是，在客户端硬编码密码是非常糟糕的做法，因为这是一个巨大的安全漏洞。

<input type="text" name="vip-code" id="vipcode" value="" />
<div id="container" style="display:none;"></div>
<script>
  $(function () {
    var validcode = "ThePassword";
    $("#vipcode").keyup(function () {
        var code = $(this).val();
        if (code === validcode) {
            $("#container").show();
        } else {
            $("#container").hide();
        }
    });
  });
</script>

http://jsfiddle.net/uuy6ovf6/2/