SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    form input placeholder jQuery modernizer..

    hi,

    I can't test on IE, but I just realized that even Chrome doesn't support this HTML5 "placeholder" stuff...

    even this one,
    http://www.cssnewbie.com/example/placeholder-support/
    the box where it says it works in all modern browsers it doesn't work in Chrome (Version 21.0.1180.89 on mac)
    (I mean functionality that box gets emptied of text on focus..)

    http://mayacove.com/dev/jq/test_placeholder.html

    so how do I make this work in browsers that do not support this stuff? (& I can't even test on IE)

    all this slick HTML5 stuff in the end is more work than it's worth... :-(
    because of the old browsers..

    so how about just including a "value" attribute -- in addition to placeholder attribute -- and then doing the traditional JS stuff to empty the field on focus
    instead of doing this whole modernizer thing?
    (can you just detect whether the browser supports support placeholder attribute? I can take it from there....;-)



    not even sure what things I need to check here
    http://modernizr.com/download/
    to make this placeholder functionality work with modernizer/older browsers...
    (checked the two that mention "input" but might not do the trick..)

    at any rate the code they have here,
    http://webdesignerwall.com/tutorials...aceholder-text

    also doesn't work in Chrome...

    oh brother, so much time spent for a simple text input...

    AND HOW ABOUT TEXTAREA???

    thank you...

  2. #2
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    a simple detect-test here,
    http://mayacove.com/dev/jq/placeholder_detect.html

    to detect if browser supports placeholder feature, on Chrome get alert that it's supported, but it clearly is not working
    (can test yourself in text input...)

    at least in my Chrome it's not working.... :-(

    WTF????

    thank you..

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Works just fine for me in Chrome 21.0.1180.89 on OS X Lion.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    the box where it says it works in all modern browsers it doesn't work in Chrome (Version 21.0.1180.89 on mac)
    (I mean functionality that box gets emptied of text on focus..)
    There may be a misunderstanding going on here. The HTML5 placeholder specs don't say that the placeholder text must be emptied on focus. Here's what they do say (formatting added by me):

    User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).

    So due to the and/or situation, it's up to the browser vendors to determine whether the placeholder text is to be cleared on focus or not.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you for your response....

    well, it doesn't work at all in my Chrome, so main issue is:

    when I test for support in Chrome the test returns that it does support it.... (?????)

    either it supports it or not, that's fine.. but if I test and it says it does support it when in fact it's not working,
    (as can see here, http://mayacove.com/dev/jq/placeholder_detect.html)
    that throws a bit of a monkey-wrench into my situation..

    so opted for this very simple solution, then, that am applying to all browsers (without conditional to test if it's supported (and can't even test in IE -- yikes) )

    Code:
    //	if (!placeholder_support) {
    		$('input[type=text],textarea').focus(function() {
    			$(this).attr('placeholder','');
    		});
    //	}
    omitting conditional then, because for Chrome the conditional returns that it does support it, but in my Chrome at least, it doesn't work at all....

    make sense??

    thank you...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    make sense??
    Sorry no, it doesn't make sense. Some browser vendors have decided that the placeholder should still remain when the field is focused, and should only be not shown once some content it placed there.

    Secondly, with your solution, if someone moves on to another field leaving that previous one empty, you have now removed the placeholder that should normally reappear there.

    And also, people using your page will experience a different user experience from what they are used to. If they have become used to placeholder fields remaining until they type something, it will come as a surprise to them when the placeholder disappears as soon as they touch it. Don't surprise your users. Go with a policy of least surprise.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so then what should I do?

    why does the test in my Chrome say it works when in fact it doesn't??? :-(

    thank you...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    why does the test in my Chrome say it works when in fact it doesn't??? :-(
    What are you expecting from the test, that seems to be different from what it should do?

    What I am experiencing is that the placeholder text goes away as soon as I type something in the field, and it returns when I remove what I typed in the field. That is the normal experience for me on my chrome browser.

    With Firefox, the placeholder goes away instead when the field is focused, and returns when the field has no content and is not focused.

    It is unrealistic to expect different web browsers to behave exactly the same as each other. Instead, what should happen is for the experience on a web browser to be consistent across multiple web sites.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    What are you expecting from the test, that seems to be different from what it should do?
    again, pls seee
    http://mayacove.com/dev/jq/placeholder_detect.html

    on Chrome:
    alert comes up saying Chrome does support placeholder.. but when I click on the text box the text does not go away!!!!!!!!!!

    THAT is the problem..... :-(

    (again, my Chrome is Version 21.0.1180.89, running on mac 10.6.8..)

    thank you...

  10. #10
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    my code to detect:


    Code:
    function supports_input_placeholder() {
    	var i = document.createElement('input');
    	return 'placeholder' in i;
    }
    
    $(function() {
    
    
    	if (supports_input_placeholder) {
    		alert('this browser supports placeholder');
    	} else {
    		alert('this browser does not support placeholder');
    	}
    	
    
    });

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    just realized something... the placeholder thingie (that text disappears on focus) does not work for "number" type input....

    oh brother..... not sure if they want that also for the numbers... (this is actually for a test, not sure if I should ask them..)

    so I guess for the "number" types I should do the regular JS thingie...?

    but this also doesn't work..

    Code:
    $('input[type=number]').focus(function() {
    		$(this).attr('placeholder','');
    	});
    oh brother... I can' believe how much time I've spent on this placeholder thing.... :-(

    this is the only pending thing I still have on this project...

    thank you...



    EDIT: PS: so should I make them all type="text", then?

    (used "number" type for following values those fields will have: things like length, weight, cost, etc..)

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    on Chrome:
    alert comes up saying Chrome does support placeholder.. but when I click on the text box the text does not go away!!!!!!!!!!
    The placeholder text goes away when something is entered in to the text field. That is how it works on the Chrome web browser, is normal, to specifications, and is expected.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oooohhh... man, you're right, I didn't know... oh brother.....

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    oooohhh... man, you're right, I didn't know... oh brother.....
    It helps to apply the same mind-set that is applied to other cross-web browser situations. Don't expect them to be pixel perfect, or to behave exactly the same either

    Instead, attempt to have the user experience be consistent between your pages and the thousands of other sites that the user views with their same web browser. Anything else tends to be a recipe for madness.
    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
  •