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 Coder
    Join Date
    Jun 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery .click / active input box issue

    Ok so i have made a sign in page which has two text boxes. One that says username and the other that says the text password. When u click on username it clears the text and lets you input. When you click password it changes the type to "password" and lets you input. It does this via the .click function however if you enter your username and click tab to enter your password you are not running the function and the text does not change to the type="password".

    How do i get this function to run if i tab down to the password box?

    Code:
    <head>
      <script>
        $(document).ready(function() {
          $('#user_paswd').click(function() {
            $('#user_paswd').prop('type', 'password');
            $(this).addClass('exampleText').val($(this).attr('title'));
          }); // End function
        }); // End prep Jquery
      </script>
    </head>
    
    <div id="login_page" align="center">
      <div class="logo"></div>
        <div id="login_section">
        <?php echo validation_errors(); ?>
        <?php print form_open("login"); ?>
          <input type="text" name="user_id" id="user_id" value="User ID" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>  
          <input type="text" name="user_paswd" id="user_paswd" value="Password"/>
        <?php echo form_submit('login_submit', 'Submit', 'class="submit"'); ?>
        <div id="sys_version">System Version: <?php print config_item('system_version') ?></div>
      </div>
    </div>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    First of all, I seem to remember that some browsers don’t allow dynamically changing the input type. I once did it with a workaround of adding a text field dynamically, positioning it over the existing password field, and hiding it on focus.

    And speakin of focus: that is what you need here. Don’t use onclick on form controls, use onfocus or onchange (or their jQuery equivalents), depending on the field type and action.

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    First of all, I seem to remember that some browsers don’t allow dynamically changing the input type. I once did it with a workaround of adding a text field dynamically, positioning it over the existing password field, and hiding it on focus.

    And speakin of focus: that is what you need here. Don’t use onclick on form controls, use onfocus or onchange (or their jQuery equivalents), depending on the field type and action.
    Just tested it on IE and your right, it does not like it at all. I think ill go for the hidden textbox method you used. If i use tab to change the input box im using with a hidden text box will it disapear if i use onfocus ?

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also another problem with that way is you click the eliment and it makes the password box with password written in it disapear then you have to click the real password box.

    Is there any way around that?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by exploit View Post
    If i use tab to change the input box im using with a hidden text box will it disapear if i use onfocus ?
    Yes, focus is independent of the method used (mouse/keyboard). When the cursor is in the text field, the field gains focus. Likewise, anchors gain focus if you tab through them or click them (you see this on the (dotted) outline some browsers add).

    Quote Originally Posted by exploit View Post
    Also another problem with that way is you click the eliment and it makes the password box with password written in it disapear then you have to click the real password box.

    Is there any way around that?
    Yeah, of course you need to revert everything to the initial state if you “unfocus” the input (but only if nothing has been put in). The opposite of onfocus is onblur (or blur() in jQuery). This is the site where I’ve done it: http://petersohn-schuhe.de/massschaefte

    Basically it works like this:
    PHP Code:
    $('input[type=password]')
        .
    before($('<input>', {
            
    type'text',
            
    'class''password',
            
    value'Password',
            
    focus: function() {
                $(
    this).hide().next().focus().addClass('focus');
            }
        }))
        .
    blur(function() {
            if($(
    this).val() == '') {
                $(
    this).removeClass('focus').prev().show();
            }
        }); 
    Dynamically add a text input before the password input (so it gets focus before password field when you tab through the fields). You can then position the text input above the password field. On focus it hides the text field and the password field becomes visible, gaining focus itself at the same time. And on blur it checks whether there is anything written into the password field and if not, it shows the text field again.


  •  

    Posting Permissions

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