SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Input type="password"

    How do I tell my password function to have input type="password" onfocus.

    I also want the text "Password" to disappear onfocus.

    Code JavaScript:
    function pass_focus(){
         if (pass.value == 'Password'){
    	fields.replaceChild(new_pass, pass);
    	window.setTimeout(function(){ new_pass.focus(); }, 0);
    	}
         }
     
         function pass_blur(){
    	if (new_pass.value == ''){
    		fields.replaceChild(pass, new_pass);
    	}
         }

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can't change the type attribute in Internet Explorer so the only way to do it is to swap the entire field (at least in IE). See http://javascript.about.com/library/blpass1.htm for code that will do the necessary field substitution in IE and which will just change the type in other browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I would use the new 'placeholder' attribute, but others here would disagree and it isn't implemented in all browsers yet

    Why not put the text normally over the input box in a div and fade it out when someone starts to enter the password?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by clairs View Post
    Why not put the text normally over the input box in a div and fade it out when someone starts to enter the password?
    Surely it depends on how all the other fields in the form are being displayed. If all of them have their description as the default text so as to save space on a cluttered page then having a password field appear to do the same would be the most sensible alternative.

    Which approach to take for all the fields should have been decided prior to starting on coding the HTML for the site. If that decision was to put the descriptions inside the fields (which isn't necessarily a good decision to have made - but could have been a requirement specified by the client for whom the site is being created) then it isn't appropriate to treat a password field any differently.

    Also if you did use the paceholder attribute then you'd need to use JavaScript to emulate the functionality in ALL the browsers that don't yet support it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Surely it depends on how all the other fields in the form are being displayed. If all of them have their description as the default text so as to save space on a cluttered page then having a password field appear to do the same would be the most sensible alternative.
    I'm not suggesting it should look any different

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by clairs View Post
    Why not put the text normally over the input box in a div and fade it out when someone starts to enter the password?
    If the div puts the text exactly where it would need to be in order that it doesn't look different then it would behave different because you couldn't click on the field to enter the password because the div would be in the way. If the div is placed so as to not interfere with the password field then it would look different.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall View Post
    If the div puts the text exactly where it would need to be in order that it doesn't look different then it would behave different because you couldn't click on the field to enter the password because the div would be in the way. If the div is placed so as to not interfere with the password field then it would look different.
    Trying to think creatively, what if the password field were on top, but with 0 opacity. That way when you click, it is the password field that you're interacting with, and the fade effect can be applied to the password field itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If the div puts the text exactly where it would need to be in order that it doesn't look different then it would behave different because you couldn't click on the field to enter the password because the div would be in the way. If the div is placed so as to not interfere with the password field then it would look different.
    Use javascript to make it clickable

    But then again, I personally wouldn't do it. I'd use the placeholder attribute

  9. #9
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I am reading through this thread, the accessibility is bugging me. Do you want to see plain text then change that to *s onBlur?
    Ryan B | My Blog | Twitter


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
  •