Problem with placeholder in textarea in mobile phone

I have example from here…

running here…

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…

Does that disappear in other browsers? I don’t think it would. Not without some JS.

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…:wink:
my problem is in iPhone…
(again, it’s from example here,

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?

thank you…

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.

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…

(& 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…

NO. :slight_smile:

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:

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:

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

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…:slight_smile:

thank you…

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.)

ok… thank you very much, Ralph…:slight_smile:

(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…

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.