将ASP.NET TextBox渲染为HTML5输入类型“Number”

Question

当ASP.NET TextBox呈现它时，它会产生：

<input type="text" />

但是，我需要将其呈现为HTML5数字类型，例如：

<input type="number" />

这可能吗？

Answer 1

我对使用ASP.NET的移动网站有同样的要求。在找不到好的解决方案之后，我尝试直接在文本框上设置type="number"。令我惊讶的是，它奏效了！不可思议的是，我创建了一个简单的测试项目来仔细检查。我在每个.NET版本中运行了这行代码：

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

结果如下：

<!-- 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" />

结论：如果您使用的是ASP.NET 4.0或更高版本，只需将type="number"添加到文本框中即可。

Answer 2

TextMode属性用于此，例如

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

可能会呈现为

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

文本模式除[MultiLine |密码| SingleLine]是在VS2010之后的一段时间推出的 - 文档并没有很快告诉我何时。

Answer 3

覆盖基本文本框控件

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(); 
}
....
}

或者你可以查看我在http://www.codeproject.com/Articles/68834/Enhanced-Textbox-Control找到的那个

Answer 4

我能够使用动态创建的控件执行此操作，如下所示：

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

Answer 5

您必须创建一个继承自TextBox的新控件并覆盖渲染，或者您可以生成一个javascript片段以在事后更改它。

Answer 6

您可以使用Enum TextBoxMode的成员

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

这个渲染

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

完整的枚举是

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 7

在type="number"设置<asp:textbox type="number" runat="server">，无论它是否出现在列表中，出乎意料的是它会起作用