Визуализация ASP.NET TextBox как HTML5 Тип ввода «Число»

Question

Когда ASP.NET TextBox рендерит, он выдает:

<input type="text" />

Однако мне нужно вместо этого отобразить его как тип числа HTML5, например:

<input type="number" />

Возможно ли это?

Answer 1

У меня было такое же требование для мобильного сайта, использующего 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" в текстовое поле.

Answer 2

Для этого используется свойство 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 - документация не позволяет мне точно сказать, когда именно.

Answer 3

Переопределить базовый элемент управления текстовым полем

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

Answer 4

Мне удалось сделать это с помощью динамически созданного элемента управления, например:

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

Answer 5

Вы можете использовать элементы Enum TextBoxMode

<asp:TextBox ID="MyAwesomeId" runat="server" TextMode="Number"></asp:TextBox>

Этот рендер

<input type="number" value="5" id="MainContent_MyAwesomeId" c>

полный Enum равен

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
}

Answer 6

вам придется создать новый элемент управления, наследующий от TextBox, и переопределить рендеринг, или вы можете сгенерировать фрагмент JavaScript, чтобы изменить его после факта.

Answer 7

набор type="number" в <asp:textbox type="number" runat="server"> независимо от того, что это не появляется в списке, неожиданно это будет работать