Как заставить ASP: TextBox иметь тип электронной почты?

У меня есть приложение 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"/>

Как заменить атрибут типа "text" на "email"?

Ответ 1

Если вы используете .Net 3.5, то независимо от того, какой тип вы указали с помощью <asp:TextBox>, он всегда будет отображаться с помощью <input type="text" />. Таким образом, в этом случае вы можете использовать простой html-ввод с типом = "email"

<input type="email" />

Для версии 4.5 вы можете использовать TextMode="Email"

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

Ответ 2

Жаль, что я немного опаздываю на вечеринку, хотя я думаю, что другие могут выиграть от того, что я сделал. У меня есть страница HTML 5, хотя у нас все еще есть .NET 3.5. Мы хотели сохранить элемент .NET, хотя изменение типа для электронной почты. Я пробовал несколько методов, хотя тот, который работал у меня, был следующим: я добавил свойство JavaScript к самому элементу inline (когда я положил его в тег script, он почему-то не подобрал бы...)
Вот как выглядит ваш тег, если вы используете мои изменения:

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

Eli

Ответ 3

Вы можете использовать вот так.

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

Новый синтаксис позволяет определить элемент управления TextBox, совместимый с HTML5. Например, следующий код определяет элемент управления TextBox, совместимый с HTML5:

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

Вы можете ссылаться на эту ссылку http://support.microsoft.com/kb/2468871 и перейти к функции 3.

Ответ 4

В старых версиях .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);
        }
    }
}

Вам также необходимо включить файл в файл aspx с помощью @Register:

<%@ 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. Это может привести к хаосу.

Ответ 5

если вы хотите показать предварительный просмотр списка электронной почты в зависимости от ваших персонажей, которые вы вводите, и вашей истории имен электронной почты в браузере, вы должны установить имя идентификатора элемента только "email". но весь метод в основном работает на хроме:

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

или, если вы используете стандартные элементы HTML:

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

Ответ 6

Мое решение (не обновляющееся до .Net 4.5) закончилось так: inline script, идентификатор элемента виден, если вы проверите визуализированный элемент ввода html.

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