Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Scotland, United Kingdom
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Timed Uncheck of ticked Checkbox

    Hi,

    I was wondering if it were at all possible to uncheck a checkbox which has been 'checked/ticked' after eg. 10 seconds of the checkbox being checked.

    I have a function which will reveal the password in a password input field, which when the checkbox is ticked it will reveal the password for the user to view that they have entered the correct password; however I'd like it so that the checkbox is unchecked after eg. 10 seconds and then the password is then reverted back to it's "password state (stars)"...

    Here is the code I am working with:

    HTML

    Code:
    <label for="passdemo">Username:</label> <input type="text" id="txtUserName" />
    			<p>
    			<label for="passdemo">Password:</label> <input type="password" id="txtPassword" />
    			<input type="text" id="txthdnPassword" style='display:none;' />
    			<p>
    			<input type="checkbox" id="chkShow" style="border: 0px;" /> Reveal Password
    JQUERY

    $(document).ready(function() {
    $('#txthdnPassword').hide();
    $('#txthdnPassword').attr('readonly','readonly');
    $('#txtPassword').blur(function() {
    $('#txthdnPassword').val($(this).val());
    });

    $('#chkShow').change(function() {
    var isChecked = $(this).prop('checked');
    if (isChecked) {
    $('#txtPassword').hide();
    $('#txthdnPassword').show();
    }
    else {
    $('#txtPassword').show();
    $('#txthdnPassword').hide();
    }
    });
    });


    Or is there a way to timeout the "reveal" within the jQuery code itself?

    Thank you in advance for any help you are able to provide, even if you come back and say what I am trying to achieve is not possible.

    I am aware, that in the password input field in (modern) browsers, there is a reveal password icon that appears which shows the password for a period of time, although there are users that have out-dated browsers and so that "function" won't be available, hence what I am trying to achieve.

    Regards,
    O.W

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    I can show you how to pretty easily do it with vanilla JS. But if you want a jQuery solution, maybe you should post in the jQuery forum.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Here's how I'd do it without needing to drag in the entire jQuery library for something so simple.
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <label for="passdemo">Username:</label> <input type="text" id="txtUserName" />
    <p>
    <label for="passdemo">Password:</label> 
    <input type="password" id="txtPassword" value="********" />
    <input type="text" id="txthdnPassword" value="revelation" style="display:none;" />
    <p>
    <input type="checkbox" id="chkShow" style="border: 0px;" /> Reveal Password
    
    <script type="text/javascript">
    (
      function() 
      {
          var pwd1 = document.getElementById("txtPassword");
          var pwd2 = document.getElementById("txthdnPassword");
          var cb   = document.getElementById("chkShow");
          cb.onclick = function()
          {
              if ( ! cb.checked ) 
              {
                  cb.checked = true;
                  return; // ignore if was already clicked on
              }
              pwd1.style.display = "none";
              pwd2.style.display = "inline";
              setTimeout( function( ) 
                          {
                              pwd1.style.display = "inline";
                              pwd2.style.display = "none";
                              cb.checked = false;
                          },
                          10000 );
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Jun 2013
    Location
    Scotland, United Kingdom
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks a lot Old Pedant! I searched and searched and just couldn't find anything related.

    Thanks a lot for your time in finding a solution, without even requiring the use of the, as you said, jQuery 'library' which was the way I was searching for!

    Thanks Old Pedant

    Quote Originally Posted by Old Pedant View Post
    Here's how I'd do it without needing to drag in the entire jQuery library for something so simple.
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <label for="passdemo">Username:</label> <input type="text" id="txtUserName" />
    <p>
    <label for="passdemo">Password:</label> 
    <input type="password" id="txtPassword" value="********" />
    <input type="text" id="txthdnPassword" value="revelation" style="display:none;" />
    <p>
    <input type="checkbox" id="chkShow" style="border: 0px;" /> Reveal Password
    
    <script type="text/javascript">
    (
      function() 
      {
          var pwd1 = document.getElementById("txtPassword");
          var pwd2 = document.getElementById("txthdnPassword");
          var cb   = document.getElementById("chkShow");
          cb.onclick = function()
          {
              if ( ! cb.checked ) 
              {
                  cb.checked = true;
                  return; // ignore if was already clicked on
              }
              pwd1.style.display = "none";
              pwd2.style.display = "inline";
              setTimeout( function( ) 
                          {
                              pwd1.style.display = "inline";
                              pwd2.style.display = "none";
                              cb.checked = false;
                          },
                          10000 );
          }
      }
    )();
    </script>
    </body>
    </html>
    Last edited by osiris-web; 01-25-2014 at 08:59 PM.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Wouldn't it be better if when you uncheck the checkbox, you revert the password right away without waiting for it to be automatically reverted?

    Code:
    <label>Username: <input type="text" id="txtUserName" /></label>
    <label>Password:
        <input type="password" id="txtPassword" value="revelation" />
        <input type="text" id="txthdnPassword" value="revelation" style="display:none;" />
    </label>
    <label><input type="checkbox" id="chkShow" />Reveal Password</label>
    Code:
    (function () {
        var pwd1 = document.getElementById("txtPassword"),
            pwd2 = document.getElementById("txthdnPassword"),
            timer,
            togglePassword = function () {
                pwd1.style.display = pwd1.style.display === "none" ? "inline" : "none";
                pwd2.style.display = pwd2.style.display === "none" ? "inline" : "none";
            };
    
        document.getElementById("chkShow").onclick = function () {
            var me = this;
            togglePassword();
            if (this.checked) {
                timer = setTimeout(function () {
                    togglePassword();
                    me.checked = false;
                }, 10000);
            } else {
                clearTimeout(timer);
            }
        }
    })();
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •