CODEWITHSUNDEEP
asp.nethtmltextbox
Curtis
Curtis

Reputation: 103348

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?

Upvotes: 51

Views: 81538

Answers (7)

Andrew Morton
Andrew Morton

Reputation: 25023

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.

Upvotes: 18

Benjam&#237;n Camacho Castro
Benjam&#237;n Camacho Castro

Reputation: 81

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
}

Upvotes: 6

Marwah Abdelaal
Marwah Abdelaal

Reputation: 121

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

Upvotes: 2

ariscris
ariscris

Reputation: 533

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

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

Upvotes: 3

serendipity07
serendipity07

Reputation: 4326

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.

Upvotes: 69

ValidfroM
ValidfroM

Reputation: 2827

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

Upvotes: 5

lincolnk
lincolnk

Reputation: 11238

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.

Upvotes: 2

Related Questions