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
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Dynamic Input Boxes

    Hey Everyone!

    I am working on an opensource project for my website and am trying to make the input boxes for the login dynamic. Like what I have right now is it shows inside the input box "Enter Your Password" and the textbox is set to type="text". Now the problem is how can I have it so that when they enter their password it appears as *** or is hidden or something but the "Enter Your Password" still works and shows up? The code I'm using right now is below:

    Sorry... further explanation, right now heres how it works:
    1. Input box shows "Enter Your Password"
    2. When you click the box it goes blank for you to type in your password
    3. If you don't type anything and click off "Enter Your Password" re-appears

    HTML
    Code:
    <input type="text" class="login" name="passwrd" onfocus="checkClearValue(this, 'Enter Your Password')"  onblur="checkFillValue(this, 'Enter Your Password')" value="Enter Your Password" maxlength="20" />
    CSS
    Code:
    .login {
    font-family: Tahoma;
    font-size: 14px;
    color: #646464;
    text-align: right;
    border: 1px solid #646464;
    height: 25px;
    width: 200px;
    margin-bottom: 10px;
    padding: 2px;
    }
    JAVASCRIPT
    Code:
    function checkClearValue(field, label){   
      if(field.value == label)
        field.value = "";
    }
    function checkFillValue(field, label){
      if(field.value.length == 0)
        field.value = label;
    }
    Any help is greatly appreciated and +Rep will be given! Thanks
    Last edited by Troy297; 07-15-2007 at 07:11 PM.
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,908
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This should give you a start.

    <form name = "myform">

    <input type="text" class="login" name="passwrd" onfocus="checkClearValue(this, 'Enter Your Password')" onkeyup = "obscurePW()" onblur="checkFillValue(this, 'Enter Your Password')" value="Enter Your Password" maxlength="20" />

    </form>

    <script type = "text/javascript">

    var pwdval = "";
    var hiddenpwd = "";

    function checkClearValue(field, label){
    if(field.value == label) {
    field.value = "";
    pwdval = "";
    hiddenpwd = "";
    }
    else { // if password once entered cannot be modified/lengthened, only re-entered
    field.value = "";
    hiddenpwd = "";
    }

    }

    function checkFillValue(field, label){
    if(field.value.length == 0) {
    field.value = label;
    }
    else {alert(hiddenpwd)} // when full password entered - to be placed in a hidden field
    }

    function obscurePW() {
    pwdval = document.myform.passwrd.value;
    len = pwdval.length;
    lastchar = pwdval.substring(len-1, len);
    hiddenpwd = hiddenpwd + lastchar;
    hiddenpwd = hiddenpwd.replace(/\*/g, ""); // eliminate backspaces or * characters
    pwdval = pwdval.replace(/./gi, "*")
    document.myform.passwrd.value = pwdval;
    }

    </script>
    Last edited by Philip M; 07-16-2007 at 01:25 PM. Reason: typo

  • #3
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Hey,

    First of all thanks very much for the script but it doesn't quite work...

    When I type in the password it isn't hidden and then when I click off the password box I get a blank javascript alert...

    Any help? +Rep to Phil
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,908
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Strange, it works fine for me in IE.

    Sure you have copied it all correctly? Is the form name correct?

    Try adding an alert:-
    function obscurePW() {
    pwdval = document.myform.passwrd.value;
    alert (pwdval);

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Script:
    Code:
    function showHideRealPwd(fakePwd, realPwd, isShowRealPwd){
      if (isShowRealPwd) {
        fakePwd.className = fakePwd.className.replace(/showpwd/, "hidepwd");
        realPwd.className = realPwd.className.replace(/hidepwd/, "showpwd");
        realPwd.focus();
      }
      else if (realPwd.value==""){
        fakePwd.className = fakePwd.className.replace(/hidepwd/, "showpwd");
        realPwd.className = realPwd.className.replace(/showpwd/, "hidepwd");
      }
    }
    
    function init(){
      var f = document.forms[0];
      f.fakePwd.className = f.fakePwd.className.replace(/hidepwd/, "showpwd");
      f.passwrd.className = f.passwrd.className.replace(/showpwd/, "hidepwd");
    }
    window.onload = init;
    CSS:
    Code:
    .hidepwd {
      display:none;
    }
    .showpwd {
      display:inline;
    }
    HTML:
    Code:
    <form>
    <input type="text" name="fakePwd" class="hidepwd" onfocus="showHideRealPwd(this, this.form.passwrd, true);" value="Enter Your Password" />
    <input type="password" name="passwrd" class="showpwd" onblur="showHideRealPwd(this.form.fakePwd, this, false);" />
    </form>
    Fake password field is hidden and real password field is displayed by default so that if js is disabled, the password field is still usable.


  •  

    Posting Permissions

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