SitePoint Sponsor

User Tag List

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

    problem with placeholder in textarea in mobile phone....

    I have example from here...
    http://webdesignerwall.com/tutorials...aceholder-text

    running here....

    http://mayacove.com/html5/ph.html

    in iPhone 3 the placeholder works fine in type="text" fields, but in textarea it does not (it doesn't disappear when you click on textarea)
    (in OSX simulator, it works fine in iPad and iPhone, but in real iPhone placeholder text does not disappear when I click on textarea...(could this be b/c my iPhone is iPhone3?)

    thank you...

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Does that disappear in other browsers? I don't think it would. Not without some JS.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    well, I was just going to post that the JS code I have in there is irrelevant for mobile, it's for the older browsers.....;-)
    my problem is in iPhone.....
    (again, it's from example here, http://webdesignerwall.com/tutorials...aceholder-text)

    again: problem is ONLY in iPhone, and ONLY in textarea.... for regular text boxes it works fine, even in iPhone.. prob is only with textarea, only in iPhone....
    (works fine in FF, Chrome, Safari... in desktop/laptop..)

    (were you able to test in an iPhone? http://mayacove.com/html5/ph.html)

    thank you......

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    It does disappear on iPad when you start typing IMO. If you don't like that one you could try this one. It degrades well with js off too. http://www.websitecodetutorials.com/...fieldlabel.php

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh brother.. I think folks here still don't understand the problem:

    how placeholder works: when you click on the text field or textarea the placeholder text in there is supposed to disappear, yes?

    well, in the iPhone THE PLACEHOLDER TEXT **DOES NOT** DISAPPEAR FROM THE TEXTAREA **ONLY** (it disappears fine from regular text boxes..)

    last night I tested on a friend's iPad, same thing: placeholder text disappears from regular text boxes when you click on them, but NOT from textarea.....

    to see what I mean pls load this page in iPhone or iPad, click on textarea....
    http://mayacove.com/html5/ph.html

    (& I have no idea if this problem this occurs in Android and/or Windows devices also.... it does not occur in regular browsers...)

    thank you....

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    how placeholder works: when you click on the text field or textarea the placeholder text in there is supposed to disappear, yes?
    NO.

    With the HTML5 "placeholder" attribute, the text only disappears when you start to type, not when you click on the form field.

    That page you linked to has two things going on. Firstly, each input and the textarea has a placeholder attribute on it. But secondly, each input (but not the textarea) is targeted by CSS, which is removing the placeholder text when you click on the input:

    Code:
    input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    Without that CSS, you'd get the normal behavior on the placeholder text in the inputs—that is, it would only disappear when you start to type. To get what you want on the textarea also, you'd have to extend that code to this:

    Code:
    input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
        color: transparent;
    }

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh man.. ok, I see... in the textarea it does disappear when you start typing (but why won't it disappear when you click on it like the regular text boxes? weird...)

    ok. thank you very much... that code you posted does achieve that effect, though.. that's cool....:-)


    thank you....

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maya90 View Post
    why won't it disappear when you click on it like the regular text boxes?
    As I said, because the inputs are styled to do that, while the textarea isn't. In browsers where placeholder doesn't work (such as IE9 and under) the JavaScript is taking over, and the JS version removes the text when you click on the input/textarea. (So the JS versions tend to work differently from the HTML5 placeholder behavior.)

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ok... thank you very much, Ralph......:-)

    (I guess what you're saying is also that you could, in theory, use the JS that's here for the older browsers and -- just for the textarea -- apply it to all browsers.. that would work, no? of course it works with CSS, which is much more practical... but well, in theory you could do it with JS, yes?)

    thanks again...

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Not sure what you are asking there, but a few years ago, before the placeholder attribute, the only way to do this was with JS. Of course, JS is still an option instead of the placeholder attribute, though I think placeholder is much better—even though it doesn't behave quite as you were expecting.


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
  •