0

I am unable to see the placeholder values on input elements when the input is empty and deselected. The input elements:

<input id="OldPassword" runat="server" type="password" class="form-control" name="password_old" placeholder="Old password" tabindex="1" autocomplete="off" required />
<input id="NewPassword" runat="server" type="password" class="form-control" name="password" placeholder="New password" tabindex="2" autocomplete="off" required />
<input id="NewPasswordRepeat" runat="server" type="password" class="form-control" name="password_confirm" placeholder="Repeat new password" tabindex="3" autocomplete="off" required />

Placeholders not displayed on input elements

This issue emerged when I had just upgraded the project from .NET4.0 to .NET 4.5.1 and I had added an encoderType to the httpRuntime: 

<httpRuntime targetFramework="4.5.1" 
             requestValidationMode="4.5" 
             enableVersionHeader="false"
             encoderType="System.Web.Security.AntiXss.AntiXssEncoder,System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

When removing the AntiXss encoderType attribute, the inputs display their placeholders again:

Placeholders are displayed on input elements

I only have this issue when using Internet Explorer, Chrome and FireFox seem to be working just fine. I am using Internet Explorer v11.0.9600.17728, so placeholder attributes are supported or they wouldn't have worked before using the AntiXssEncoder.

What could be causing this issue?

Sjeijoet
  • 741
  • 4
  • 20

1 Answers1

1

The issue was caused by a meta tag for X-UA-Compatible with multiple content values for early IE version rendering:

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

The contents of this tag were encoded by the AntiXssEncoder to

<meta http-equiv="X-UA-Compatible" content="IE=9;&#32;IE=8;&#32;IE=7;&#32;IE=EDGE" />

Internet Explorer seems to be unable to work with the &#32 HTML code in meta tag contents and cuts the value off right after IE=9, causing the page to render in compatibility mode for IE9. Support for placeholder attributes was added in IE10, hence why they didn't display since the document was rendered for IE9.

I solved the issue by removing the spaces in the meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE" />
Sjeijoet
  • 741
  • 4
  • 20