将 ASP.NET 文本框呈现为 HTML5 输入类型“数字”

Posted 2023-03-05

【中文标题】将 ASP.NET 文本框呈现为 HTML5 输入类型“数字”

【英文标题】：Render ASP.NET TextBox as HTML5 Input type "Number"

【发布时间】：2012-03-12 23:47:03

【问题描述】：

当 ASP.NET 文本框呈现时，它会生成：

<input type="text" />

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

<input type="number" />

这可能吗？

【参考方案1】：

您必须创建一个继承自 TextBox 的新控件并覆盖呈现，或者您可以生成一个 javascript sn-p 以在事后对其进行更改。

【讨论】：

我尝试使用 jQuery 更改类型，但这不起作用。 jsfiddle.net/C4EYR这是你的意思吗？

是的，但看起来 jquery 会产生错误。使用 vanilla javascript 似乎可以工作，至少在 chrome 中是这样。 jsfiddle.net/2vEKR

【参考方案2】：

覆盖基本文本框控件

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】：

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

【讨论】：

@gunwin，听起来您将结果行之一粘贴到编辑器中，在这种情况下，type 属性将重复。我已经编辑了答案，以便更清楚我在测试中做了什么。

【参考方案4】：

我可以使用这样的动态创建控件来做到这一点：

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

【参考方案5】：

在<asp:textbox type="number" runat="server"> 中设置type="number" 不管它没有出现在列表中，令人惊讶的是它会起作用

【参考方案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 之后的某个时间引入的 - 文档并没有很快告诉我确切的时间。

【讨论】：

这是“技术上”正确的处理方式，现在它得到了支持。

【参考方案7】：

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