如何强制ASP:TextBox是电子邮件类型?

时间:2013-06-04 09:27:09

标签: asp.net html5 validation

我有一个ASP.NET 3.5应用程序,我想根据type="email"标准添加HTML5但是如果我在ASP:TextBox控件上添加类型,我会得到低于输出:

<input name="ctl00$content$txtEmailAddress" type="text" type="email" value="" 
id="ctl00_content_txtEmailAddress" class="input-block-level" required="required"/>

如何将type属性从“text”替换为“email”?

6 个答案:

答案 0 :(得分:32)

如果您使用的是.Net 3.5,那么无论您使用<asp:TextBox>指定了哪种类型,它都会始终使用<input type="text" />呈现。因此,在这种情况下,您可以使用type =“email”

的简单html输入
<input type="email" />

对于4.5版本,您可以使用TextMode="Email"

<asp:TextBox ID="txtmyBox" runat="server" TextMode="Email"></asp:TextBox>

答案 1 :(得分:4)

对不起,我有点迟到了,虽然我认为其他人可以从我做的事情中受益。我有一个HTML 5的页面,虽然我们仍然有.NET 3.5。我们希望保留.NET元素,但要将类型更改为电子邮件。我已经尝试了几种方法,虽然对我有用的方法如下:我在元素本身内联添加了一个JavaScript属性(当我把它放在一个脚本标签中时,由于某种原因它不会被拾取...)
如果您使用我的更改,以下是您的代码的外观:

<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/>

以利

答案 2 :(得分:0)

你可以这样使用..

 <asp:TextBox runat="server" type="email" />

新语法允许您定义与HTML5兼容的TextBox控件。例如,以下代码定义了与HTML5兼容的TextBox控件:

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

您可以参考此链接http://support.microsoft.com/kb/2468871并转到功能3。

答案 3 :(得分:0)

在早期版本的.NET中,您可以扩展TextBox类,并可以设置输入类型:

一个完全基本的 - 但工作 - 解决方案可以是下面显示的解决方案,它还为文本框添加了一个占位符。

namespace Ux.Example{
    public class TextBox : System.Web.UI.WebControls.TextBox
    {
        public string PlaceHolder { get; set; }

        public string InputType { get; set; }

        protected override void OnInit(EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(PlaceHolder))
                Attributes.Add("placeholder", PlaceHolder);
            if (!string.IsNullOrWhiteSpace(InputType))
            {
                Attributes.Add("type", InputType);
            }
            base.OnLoad(e);
        }
    }
}

您还必须使用@Register将文件包含在aspx文件中:

<%@ Register TagPrefix="ux" Namespace="Ux.Example" Assembly="CHANGE_TO_CORRECT_NAME" %>

然后控件的实际用法是:

<ux:TextBox ID="Email" Visible="false" runat="server" PlaceHolder="enter e-mail address" InputType="email" />

我还没有测试使用TextMode属性时会发生什么。这可能会造成一些破坏。

答案 4 :(得分:0)

如果要根据您输入的字符和浏览器中的电子邮件名称历史显示电子邮件列表的预览,则应将元素ID的名称设置为“email”。但是所有方法都主要用于chrome:

<asp:TextBox ID="email" runat="server" CssClass="YourEmailCss"></asp:TextBox>

或者,如果您使用HTML标准元素:

<input id="email" type="email" name="email" />

答案 5 :(得分:0)

我的解决方案(不更新到.Net 4.5)就像这样使用内联脚本,如果检查渲染的html输入元素,则元素ID可见。

<label class="input text">
    <asp:TextBox runat="server" CssClass="text" ID="EmailTextBox"></asp:TextBox>
    <script>
        document.getElementById("ctl00_ContentPlaceHolder_EmailTextBox").type = "email";
    </script>
</label>