Placeholder text does not wrap in text field

In this code:

<li><textarea name="Summaries" cols="20" rows="7" style="background-color:#fff; color:#000; height:40em;" placeholder="Don't type here. After tapping Load, what you typed above will appear here. Just copy data from here to your email client to export."  ></textarea></li>

The placeholder text does not wrap and stay in the field, but stays on one line and is cut off at right border. How do I get it to wrap? This is on an HTML page and will be viewed in the iPhone.


It also does not wrap when viewed in Safari on the desktop Is this normal behavior?

It wraps in Fx as it should, so I am guessing you have some other styles at play or something.

Why are you using a placeholder attribute to tell people not to type in the field rather than using a readonly attribute which will simply prevent them from doing so?

<li><textarea name="Summaries" cols="20" rows="7" style="background-color:#fff; color:#000; height:40em;" readonly></textarea></li>

I never heard of the readonly attribute! Thanks! Besides, I wanted to let them know the purpose of the field so they could use it.

The readonly attribute was introduced in HTML 3.02 so it is fast approaching its 20th anniversary as a part of the standards - unlike the placeholder attribute which is over 20 years younger (since it is still a long way off becoming a part of the standards).

I’m using placeholders everywhere to let the user know he has only 30 characters. Then he knows the field won’t expand for more text.

Just as long as you remember that most browsers don’t support it yet as it is still only a proposed addition to a future standard.

Oh, that’s good to know. I’m only using it in the Safari browser engine, which is used in the iPhone.