Html 将 ASP.NET 文本框呈现为 HTML5 输入类型“数字”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9398356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render ASP.NET TextBox as HTML5 Input type "Number"
提问by Curt
When an ASP.NET TextBox renders it produces:
当 ASP.NET TextBox 呈现时，它会生成：
<input type="text" />
However I need it to render as a HTML5 number type instead, like:
但是我需要将它呈现为 HTML5 数字类型，例如：
<input type="number" />
Is this possible?
这可能吗？
回答by zacharydl
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:
我对使用 ASP.NET 的移动网站也有同样的要求。在没有找到好的解决方案后，我尝试type="number"直接在文本框上进行简单设置。令我惊讶的是，它奏效了！难以置信，我创建了一个简单的测试项目来仔细检查。我在每个 .NET 版本中运行了这行代码：
<!-- 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.
底线：如果您使用 ASP.NET 4.0 或更新版本，只需添加type="number"到您的文本框。
回答by Andrew Morton
The TextModeproperty is used for that, e.g.
该TextMode属性用于，例如
<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.
除了 [ MultiLine | 密码 | SingleLine ] 是在 VS2010 之后的一段时间引入的 - 文档并没有很快告诉我确切的时间。
回答by ValidfroM
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
或者您可以查看我刚刚在http://www.codeproject.com/Articles/68834/Enhanced-Textbox-Control 上找到的那个
回答by Benjamín Camacho Castro
You could use the members of the Enum TextBoxMode
您可以使用 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
}
回答by ariscris
I was able to do this with a dynamically created control like this:
我能够使用这样一个动态创建的控件来做到这一点：
TextBox control = new TextBox();
control.Attributes.Add("Type", "number");
回答by lincolnk
you would have to create a new control inheriting from TextBoxand override the rendering, or you can generate a javascript snippet to change it after the fact.
您必须创建一个继承自TextBox并覆盖渲染的新控件，或者您可以生成一个 javascript 片段以在事后更改它。
回答by Marwah Abdelaal
set type="number"in <asp:textbox type="number" runat="server">regardless of that it's not appearing in the list, surprisely it will work
设置type="number"在<asp:textbox type="number" runat="server">不管它没有在列表中出现，surprisely它会工作
