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?
Solution 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.
Solution 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.
Solution 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
Solution 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
}
Solution 5:
I was able to do this with a dynamically created control like this:
TextBox control = new TextBox();
control.Attributes.Add("Type", "number");