show div, если значение поля соответствует строке

Question

Мне нужна помощь с этим, я хочу, чтобы div отображался, когда пользователь вводит правильное значение для поля, например. ("Пароль"). Вот что у меня есть до сих пор:

<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 как только вход vipcode теряет фокус, так что есть вероятность, что событие 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/

Answer 2

Не уверен, что если ручка keyup события является правильным, но проблема в том: вы сравниваете validcode с полем ввода vip-code вместо code переменных ...

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