iPhone email keyboard layout with asp .net TextBox - asp.net

Question

You know how the iDevices will display a different keyboard layout depending on the HTML 5 value of the type attribute? So, <input type="email"... will display the iPad's e-mail keboard layout. I am using a .net TextBox but would like to have the iDevices show the appropriate keyboard layout for the field. But the type attribute gets overridden to "text" when the TextBox control renders. Any ideas?

Answer 1

No easy fix, but you can create some new control like:
public EnhancedTextBox : TextBox {
public Html5Type Html5Type { get; set; }
override AddAttributesToRender(HtmlTextWriter writer) {
// add attribute according to the selected type in the property
// something like
writer.AddAttribute("type", "email");
base.AddAttributesToRender(writer);
}
}
and use that instead of a normal TextBox

Answer 2

There is an update for .NET framework 4 which allows you to specify the type attribute.
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a TextBox control that is HTML5 compatible. For example, the following code defines a TextBox control that is HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />

Answer 3

I just solved this problem with a control adapter for <asp:TextBox>. Add this class somewhere in your project and reference it from a .browser file in App_Browsers and it will let you set what ever type you want to your input control.
public class TextBoxControlAdapter : ControlAdapter
{
protected override void Render(HtmlTextWriter writer) {
var textBox = Control as WebControl;
if (textBox != null) {
var type = textBox.Attributes["type"];
if (!String.IsNullOrEmpty(type)) {
writer.AddAttribute("type", type);
}
}
base.Render(writer);
}
}
In App_Browsers\AdapterMappings.browser (for example), add this:
<adapter controlType="System.Web.UI.WebControls.TextBox" adapterType="MyProject.ControlAdapters.TextBoxControlAdapter" />

Answer 4

There is one more solution. Unfortunately, all of the above require extensive coding, new classes, KB installation which does not update for the iPhone os 3+.
Use this if you would like your phone to display a numeric keypad for a textbox control in ASP.NET:
pattern="[0-9]*"
<asp:textbox runat="server" id="txtNumber" pattern="[0-9]*" />

Answer 5

It is also possible to implement to replace with "<input runat='server' />"
However, a tidbit problem is occurred when you define <input runat='server' type='email' id='txtEmail' /> in [...].aspx file using Visual Studio 2010.
On making it with type='email', Visual Studio will remove an instance variable definition - "protected global::System.Web.UI.HtmlControls.HtmlInputText txtEmail;" in [...].aspx.designer.cs file.
So, you have to define only "<input runat='server' id='txtEmail' />" in [...].aspx.
Instead of adding type='email' attribute in [...].aspx, you can provide an attribute in code behind file as follows,
txtEmail.Attributes.Add("type", "email");