HTML5 Placeholder Attribute on Textarea via jQuery in IE10

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');

Answer 2

Fiddle: http://jsfiddle.net/Aqnt5/5/

You can remove the value with jQuery, to make it behave correctly:

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

I dont know why they put the placeholder as a value in the first place...