HTML5 + SharePoint People Picker: I give up!

The SharePoint 2010 people picker is a piece of crap. Plain and simple. I have not had a chance to check out what 2013 has to offer for a people picker control – honestly I am a little scared to. I just know that the people picker breaks all the time in IE under normal circumstances, and when you try to use an HTML5 master page on your SharePoint site, it gets even worse. There are some ways to try to fix it that people have put out there (see here: http://social.msdn.microsoft.com/Forums/da/sharepoint2010general/thread/8c83010e-d351-48ba-bd1e-1ffb0641ec03) but but I have not come across a 100% solution to fix IE yet that results in a working HTML5 page.

This is the funny part: When the browser is not IE – something superior like Chrome or Firefox – the people picker is functional. It is ugly – showing login names rather than display names – but that is a small price to pay for having it be functional. Plus it has always been ugly. So I thought – ‘Hey, what if I could make the code think it was using a different browser so the people picker can work…’ And here is how I did it:

Add this JavaScript to the bottom of your master page. (If you do not have a custom master page, you are out of luck – since most of the people pickers can be found on layouts pages.)

if (typeof (PreferContentEditableDiv) == "function") {
    //force downlevel people picker because HTML5 + IE makes people picker more terrible than usual
    PreferContentEditableDiv = _PreferContentEditableDiv;
    $("div.ms-inputuserfield").css("display", "none");
    $("textarea.ms-inputuserfield").css({"display": "inline", "position":"static"});
}