jQuery .click / active input box issue

exploit · 07-08-2012, 11:34 PM

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>

VIPStephan · 07-08-2012, 11:47 PM

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.

exploit · 07-09-2012, 08:05 AM

Quote:

Originally Posted by VIPStephan

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 ?

exploit · 07-09-2012, 08:22 AM

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?

VIPStephan · 07-09-2012, 09:53 AM

Quote:

Originally Posted by exploit

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

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.