SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to assign multiple onfocus events?

    How do you assign multiple onfocus events to a input tag?

    I have this input tag:
    HTML Code:
    <input type="text" class="inputbox" id="password_login" size="12" name="passwd" maxlength="50" value="[password]" onfocus="if (this.type == 'text') {this.type='password'}" tabindex="3"/>
    I also want to add this onfocus event to the tag:
    HTML Code:
    onfocus="if (this.value == '[password]') {this.value=''}"
    Is it possible to have more than one onfocus event in a tag, if so, how do you do this?

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can have as many lines of code as you like in an event handler function. just combine the 2 if blocks into 1 function to do what you need.

  3. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you do that?

    I've tried this:
    HTML Code:
    <input type="text" class="inputbox" id="password_login" size="12" name="passwd" maxlength="50" value="[password]" onfocus="if (this.type == 'text') {this.type='password'}, (this.value == '[password]') {this.value=''}" tabindex="3"/>
    But that only works in Firefox, not in IE

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    But that only works in Firefox, not in IE
    You cannot change the input type on IE. You'll need to instead remove the input and replace it with a different input.

    You can do that by having two separate input fields where you hide/show the appropriate input field.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show me an example how you would do this?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    Can you show me an example how you would do this?
    Sure thing, here's an example that uses jQuery to keep the scripting down to a fairly small amount:

    See: jQuery: show plain text in a password field and then make it a regular password field on focus
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Because there is a conflict between the password blur, and the form field blur events (where you cannot guarantee which one will trigger first) you could use setTimeout to delay the form field blur function just slightly, even by 100ms.

    Or, you could tell the standard form field blur function to ignore the password fields, so that you can then treat those ones differently.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you make an example how you would implement this in the code above?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Sure thing, let's find out how to do it.

    At the jQuery selector documentation page there are a large range of techniques available, but the ones we're after will allow us to say that we're not interested in ones where the name starts with 'password'.

    They are the :not selector, and the attribute starts with selector

    So instead of this line:

    Code:
    $('.default-value').each(function() {
    We'll say that we're not interested in ones that start with "password"

    Code javascript:
    $('.default-value:not([name^="password"])').each(function() {

    because they have their own special set of functions to handle them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange, I'm using:
    Code JavaScript:
    $('.default-value:not([name^="password"])').each(function() {

    instead of:
    Code:
    $('.default-value').each(function() {
    But I'm still getting different colors:



    The values "Email Address" and "Password" should be gray, and when you type in the fields the text should turn black.

    What could be the problem?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    Strange, I'm using:
    Code JavaScript:
    $('.default-value:not([name^="password"])').each(function() {
    The purpose of that is to stop the double handling of the password section.
    Now you can just tell $('#password-password') to be grey, perhaps from its own onfocus section, and things should be sweet.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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