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?
Add a comment
|
7 Answers
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.
1 Comment
serendipity07
@gunwin, It sounds like you pasted one of the result lines into your editor, in which case there would be duplicate
type attributes. I've edited the answer to be more clear what I did in my tests.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.
1 Comment
DreamTeK
This is "technically" the correct way to handle it now it is supported.
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
}
Comments
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
Comments
I was able to do this with a dynamically created control like this:
TextBox control = new TextBox();
control.Attributes.Add("Type", "number");
Comments
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.
2 Comments
Curtis
I've tried changing the type using jQuery, but this isn't working. jsfiddle.net/C4EYR Is this what you meant?
lincolnk
yeah, but it looks like jquery produces an error. doing it with vanilla javascript seems to work, at least in chrome. jsfiddle.net/2vEKR
set type="number" in <asp:textbox type="number" runat="server">
regardless of that it's not appearing in the list, surprisely it will work
