Question 288318 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Password validation with Javascript

I can’t seem to find the reason why the code isn’t working. I tried to search for syntax errors but there’s none. Upon typing pwd into the textbox, it should reveal the text "hello" however, it does not change the css.

<html>
    <head>
        <style>
            .censor{
                filter: blur(10px);
                -webkit-filter: blur(10px);
            }
        </style>
    </head>
    <body>
        <text class="censor">Hello</text>
        <input type="password" placeholder="[Input password to reveal]" id="password" onkeyup="reveal()"/>

        <script>
            function reveal(){ 
                var pass = document.getElementById("password").value; 
                if (pass == "pwd") {
                    $(".censor").css("filter","blur(0)");
                    $(".censor").css("-webkit-filter","blur(0)");
                }else{
                    $(".censor").css("filter","blur(10px)");
                    $(".censor").css("-webkit-filter","blur(10px)");
                }
            }
        </script>
    </body>
</html>
Tags:

2

Answers


  1. 0

    I just import the jQuery lib and works fine:

    function reveal(){ 
        var pass = document.getElementById("password").value; 
        console.log(pass)
        if (pass == "pwd") {
            $(".censor").css("filter","blur(0)");
            $(".censor").css("-webkit-filter","blur(0)");
        }else{
            $(".censor").css("filter","blur(10px)");
            $(".censor").css("-webkit-filter","blur(10px)");
        }
    }
    .censor{
    filter: blur(10px);-webkit-filter:  blur(10px);
  }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<text class="censor">Hello</text>
<input type="password" placeholder="[Input password to reveal]" id="password" onkeyup="reveal()"/>
    Login or Signup to reply.
  2. 0

    Try using <span> or <div> instead of <text> for the element

    <body>

<span class="censor">Hello</span>
<input type="password" placeholder="[Input password to reveal]" id="password" onkeyup="reveal()"/>

<script>
    function reveal() { 
        var pass = document.getElementById("password").value; 
        if (pass == "pwd") {
            $(".censor").css("filter", "blur(0)");
            $(".censor").css("-webkit-filter", "blur(0)");
        } else {
            $(".censor").css("filter", "blur(10px)");
            $(".censor").css("-webkit-filter", "blur(10px)");
        }
    }
</script>

</body>

    I replaced with for the text element. Now, when you type "pwd" into the textbox, it should reveal the text "Hello" by removing the blur effect.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search