Render ASP.NET TextBox as HTML5 Input type “Number”

Question

When an ASP.NET TextBox renders it produces:

However I need it to render as a HTML5 number type instead, like

Answer 1

I had the same requirement for a mobile website using ASP.NET. After finding no good solution, I tried simply setting type="number" directly on the textbox. To my surprise, it worked! Incredulous, I created a simple test project to double-check. I ran this line of code in each .NET version:

<!-- this HTML tested in each .NET version -->
<asp:TextBox runat="server" type="number" />

Here are the results:

<!-- ASP.NET 2.0, 3.0, and 3.5 -->
<input name="ctl01" type="text" type="number" />

<!-- ASP.NET 4.0 and 4.5 -->
<input name="ctl01" type="number" />

Bottom line: if you are using ASP.NET 4.0 or newer, just add type="number" to your textbox.

Answer 2

I was able to do this with a dynamically created control like this:

TextBox control = new TextBox();
control.Attributes.Add("Type", "number");

Answer 3

You could use the members of the Enum TextBoxMode

<asp:TextBox ID="MyAwesomeId" runat="server" TextMode="Number"></asp:TextBox>

This render

<input type="number" value="5" id="MainContent_MyAwesomeId" c>

the full Enum is

public enum TextBoxMode
{
    SingleLine = 0,
    MultiLine = 1,
    Password = 2,
    Color = 3,
    Date = 4,
    DateTime = 5,
    DateTimeLocal = 6,
    Email = 7,
    Month = 8
    Number = 9,
    Range = 10,
    Search = 11,
    Phone = 12,
    Time = 13,
    Url = 14,
    Week = 15
}

Answer 4

The TextMode property is used for that, e.g.

<asp:TextBox ID="uPhone" CssClass="formEntry" TextMode="Phone" ClientIDMode="Static" runat="server"></asp:TextBox>

might be rendered as

<input name="ctl00$ContentPlaceHolder1$uPhone" id="uPhone" class="formEntry" type="tel">

The textmodes in addition to [ MultiLine | Password | SingleLine ] were introduced some time after VS2010 - the documentation does not quickly tell me exactly when.

Answer 5

you would have to create a new control inheriting from TextBox and override the rendering, or you can generate a javascript snippet to change it after the fact.

Answer 6

Override the base textbox control

public class HTML5TextBox : TextBox
{
.....
protected override void Render(HtmlTextWriter writer)
{
//Sth like the code below, you need do some research though
 writer.AddAttribute(HtmlTextWriterAttribute.Type,"Number");
 writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_displayTXT");
 writer.AddAttribute(HtmlTextWriterAttribute.Name,this.UniqueID + "t1");
 writer.AddAttribute(HtmlTextWriterAttribute.Value,base.Text);
 writer.RenderBeginTag(HtmlTextWriterTag.Input);       
 writer.RenderEndTag(); 
}
....
}

Or you can check the one I just found at http://www.codeproject.com/Articles/68834/Enhanced-Textbox-Control