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

时间:2012-02-22 16:01:43

标签: asp.net html5 textbox

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

<input type="text" />

但我需要将其呈现为HTML5数字类型,例如:

<input type="number" />

这可能吗?

7 个答案:

答案 0 :(得分:58)

我对使用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"添加到文本框中即可。

答案 1 :(得分:6)

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之后的一段时间推出的 - 文档并没有很快告诉我何时。

答案 2 :(得分:5)

覆盖基本文本框控件

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

找到的那个

答案 3 :(得分:3)

我能够使用动态创建的控件执行此操作:

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

答案 4 :(得分:2)

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

答案 5 :(得分:2)

您可以使用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
}

答案 6 :(得分:0)

type="number"中设置<asp:textbox type="number" runat="server"> 无论它是否出现在列表中,都会出乎意料地发挥作用