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
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Textbox style changer

    Hi,

    I am no very little when it comes to Javascript but I have seen a few sites using pre populated text boxes for login forms. So Username and password appears in the boxes to save space.

    The code below works fine onload of the site in all browsers, everything also works fine in firefox but ie the following doesn't seem to work.

    When a user clicks to enter their password in i.e. it doesn't change the form to password characters so input plain text. Also when you click out of either box it doesn't seem to re-populate the boxes with my Username or Password text.

    Any help would greatly be appreciated.

    Code:
    <script>
    function HideLabel(txtField){
                    if(txtField.name=='myusername'){
                                    if(txtField.value==txtField.defaultValue)
                                                    txtField.value = '';
                                    else
                                                    txtField.select();
                    } else if(txtField.name=='mypassword'){
                                    if(txtField.value==txtField.defaultValue){
                                                    txtField.value = '';
                                                    txtField.type = 'password';
                                    }
                                    else{
                                                    txtField.type = 'password';
                                                    txtField.select();
                                    }
                    }
    }
    
    
    function ShowLabel(txtField){
                    if(txtField.name=='myusername'){
                                    if(txtField.value.trim()=='')
                                                    txtField.value = txtField.defaultValue;
                    }else if(txtField.name=='mypassword'){
                                    if(txtField.value.trim()==''){
                                                    txtField.value = txtField.defaultValue;
                                                    txtField.type = 'text';
                                    }
                    }
    }
    </script>
    
    <input type="text" name="myusername" id="myusername" onfocus="HideLabel(this)" onblur="ShowLabel(this)" style="border:0;" value="Username" />
    
    <input type="test" name="mypassword" id="mypassword" value="Password" onfocus="HideLabel(this)" onblur="ShowLabel(this)" style="border:0;" />

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    IE does not support txtField.type.

    Try this which will work in all browsers:-

    Code:
    <form name = "myform"> 
    <input type="text" id="passwordtext" value="Enter The Password" onclick="switchTo(1)" onkeydown="switchTo(1)"> 
    <input type="password" id="pword" value="" style="display:none"; onblur="if (this.value=='') {switchTo(0)}"> 
    </form> 
    
    <script type = "text/javascript">
    
    function switchTo(qval){ 
    if (qval) { 
    document.getElementById('passwordtext').style.display="none"; 
    document.getElementById('pword').style.display="inline"; 
    document.getElementById('pword').focus(); 
    } 
    else { 
    document.getElementById('pword').style.display="none"; 
    document.getElementById('passwordtext').style.display="inline"; 
    } 
    } 
    
    </script>

    He thought he saw an Elephant,
    That practised on a fife:
    He looked again, and found it was
    A letter from his wife.
    "At length I realise," he said,
    "The bitterness of Life!"
    - Lewis Carroll

  • Users who have thanked Philip M for this post:

    SteveDD (12-24-2010)

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This is fantastic thank you, what do I need to add to the above code to make this also work on a normal text field. I.e no for the username where I don't require it to change to password protected fields.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    <input type="text" name="username" value="Enter your username"  onfocus="if(this.value==this.defaultValue) this.value='';" onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if(this.value=='') this.value=this.defaultValue;" />

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Posts
    127
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for this.

    S


  •  

    Posting Permissions

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