Question

i was wondering about some weird behaviour in Internet Explorer 10.
On my page, I am adding a textarea with jquery, including a placeholder attribute. Something like this:

$('body').append($('<textarea placeholder="Placeholder..."></textarea>'));

The placeholder attribute works perfectly fine in IE10 usually… except in this case. I tested it with elements being already on the page in this fiddle:

http://jsfiddle.net/Aqnt5/1/

As you can see, one textarea (the one added dynamically) treats the placeholder attribute like an actual value – the most annoying behaviour I could imagine…

Does anyone know of this effect and maybe also a workaround? Thanks in advance!

EDIT

I also just realised that it works as expected, after you remove the value by hand. You can remove it via jQuery.val('') as well to make it work. I am really confused by this behaviour… But this should be a suitable ‘workaround’.
See this fiddle: http://jsfiddle.net/Aqnt5/5/

Answer 1

Unfortunately I do not have IE10 to test this on, but this works everywhere else;

$('body').append('<textarea></textarea>');
$('textarea').attr('placeholder', 'placeholder');

And just double-check that your DOCTYPE is correct for HTML5

Here is a one-liner (broken into several lines here to make it more visible) that you can also do –

$('body')
    .append('<textarea></textarea>')
    .find('textarea')
    .attr('placeholder', 'placeholder');