为 html5 输入 type="date" 渲染 asp.TextBox

Posted 2023-03-05

【中文标题】为 html5 输入 type="date" 渲染 asp.TextBox

【英文标题】：Render asp.TextBox for html5 input type="date"

【发布时间】：2011-02-15 15:30:34

【问题描述】：

不知道之前有没有问过，也没找到。

是否可以控制由 asp:TextBox 呈现的输入文本的类型？我想改成<input type="date">

欢迎任何建议或cmets，谢谢

【参考方案1】：

.NET framework 4 有一个更新，允许您指定类型属性

http://support.microsoft.com/kb/2468871。

在页面下方查看feature 3

功能 3

新语法让您定义一个 html5 的 TextBox 控件 兼容的。例如，以下 代码定义了一个 TextBox 控件，它是 HTML5 兼容：

<asp:TextBox runat="server" type="some-HTML5-type" />

【讨论】：

这是个好消息，但并非所有人都可以将旧版应用升级到 .NET 4。

【参考方案2】：

如果你不介意子类化，你可以通过覆盖 AddAttributesToRender 来做到这一点

public class DateTextbox : System.Web.UI.WebControls.TextBox

    protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
    
        writer.AddAttribute("type", "date");
        base.AddAttributesToRender(writer);
    

【参考方案3】：

这是我的做法……希望对你有帮助……

在您的项目中添加一个类型为“JScript File”的新项目，然后将此代码粘贴到：

var setNewType;
if (!setNewType) 
setNewType = window.onload = function() 
    var a = document.getElementsByTagName('input');
    for (var i = 0; i < a.length; i++) 
        if (a[i].getAttribute('xtype')) 
            a[i].setAttribute('type', a[i].getAttribute('xtype'));
            a[i].removeAttribute('xtype');
        ;
    

现在将此行添加到您的 aspx 页面中的 body 标记之后（将文件名更改为您在上面调用的任何名称！）：<script type="text/javascript" src="setNewType.js"></script>

最后，在 PageLoad 后面的代码中添加如下内容（我在这里使用了 VB）：

aspTxtBxId.Attributes("xtype") = "tel" ' or whatever you want it to be

上面的重要部分是 Attributes.("xtype")，因为它将属性 XTYPE 放置在“文本框”的呈现 html 中，然后 javascript 会找到并使用它来替换原始的“类型”属性。

祝你好运！ FJF

【讨论】：

我记得以前版本的 IE（不确定 IE9）不允许通过 javascript 更改输入类型。

【参考方案4】：

我知道这个问题很老，但我在 Web 表单应用程序中遇到了同样的问题。你需要使用 TextMode

虽然文档指出

使用 TextMode 属性指定 TextBox 控件的显示方式。三个常用选项是单行、多行或密码文本框。

您还可以使用 Visual Studio 2012/2013 中内置的 html5、日期、时间、数字等。

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textmode(v=vs.110).aspx

【讨论】：

这是正确的答案。我厌倦了警告信息，我讨厌禁用警告。我不知道为什么我没有想到 textmode - 当然 MS 不能使用本机属性名称。

【参考方案5】：

我通过构建自定义控件来构建我自己的一组html5 inputs。我得到了 iPad 和 iPhone 上的自定义键盘以及真正的 asp.net 控件的回发编码。它适用于我的内部项目，因此我决定许可整个套件，以节省其他人从头开始的时间和麻烦。

希望这会有所帮助！

【参考方案6】：

实际上没有简单的方法可以覆盖标准 asp:TextBox 中的 type 属性。 您可以简单地使用输入元素

这是一个例子

<input type="date" id="Input1" runat="server" />

如果有帮助请告诉我...

【讨论】：

设计师不允许这种类型！

是的，你是对的。另一种方法是继承 TextBox 并覆盖 AddAttributesToRender(HtmlTextWriter writer) 方法。 writer.AddAttribute(HtmlTextWriterAttribute.Type, "date");