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

When an ASP.NET TextBox renders it produces:

<input type="text" />

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

<input type="number" />

Is this possible?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 2

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.

Method 3

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

Method 4

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
}

Method 5

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

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

Method 6

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.

Method 7

set type="number" in <asp:textbox type="number" runat="server">
regardless of that it’s not appearing in the list, surprisely it will work

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0