CODEWITHSUNDEEP
asp.nethtmlvalidation
RealSollyM
RealSollyM

Reputation: 1530

How do I force ASP:TextBox to be of type email?

I have an ASP.NET 3.5 application and I'd like to add the type="email" according to HTML5 standards but if I add the type on the ASP:TextBox control I get the below output:

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

How can I replace the type attribute from "text" to "email"?

Upvotes: 22

Views: 34036

Answers (6)

Eli
Eli

Reputation: 2608

Sorry I'm a bit late to the party, though I think that others can benefit from what I did. I have a page which is HTML 5 though we still have .NET 3.5. We wanted to keep the .NET element, though have the type change to email.

I've tried several methods, though the one which worked for me was the following: I added a JavaScript property to the element itself inline (when I put it in a script tag it wouldn't pick up for some reason...)

Here is what your tag would look like if you use my changes:

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

Upvotes: 6

JimiSweden
JimiSweden

Reputation: 814

My solution (not updating to .Net 4.5) ended up like this with an inline script, the element ID is visible if you inspect the rendered html input element. 

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

Upvotes: 0

mohsen solhnia
mohsen solhnia

Reputation: 376

if you want to show a preview of email list depend of your characters that you are typing and your history of email names in browser, you should set name of element ID just"email". but all method mostly work on chrome:

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

or, if you use HTML standard elements:

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

Upvotes: 0

faester
faester

Reputation: 15086

In older versions of .NET you could extend the TextBox class with the possibility to set the input type:

A completely basic - but working - solution could be the one shown below, which also adds a placeholder to the 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);
        }
    }
}

You would also have to include the file in the aspx file using @Register:

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

And the actual usage of the control would then be: 

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

I have not tested what happens when the TextMode attribute is in use. It may cause some havoc.

Upvotes: 0

Vishnu Vikraman Sreekala
Vishnu Vikraman Sreekala

Reputation: 861

You can use like this..

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

New syntax lets you define a TextBox control that is HTML5 compatible. For example, the following code defines a TextBox control that is HTML5 compatible:

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

You can refer this link http://support.microsoft.com/kb/2468871 and go to feature 3.

Upvotes: 0

Sachin
Sachin

Reputation: 40970

If you using .Net 3.5 then no matter what type you have specified with <asp:TextBox>, it will always render with <input type="text" />. So in that case you can use simple html input with type="email"

<input type="email" />

For 4.5 version you can use TextMode="Email"

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

Upvotes: 43

Related Questions