web-dev-qa-db-fra.com

Rendre ASP.NET TextBox sous le type d'entrée HTML5 "Number"

Lorsqu'un ASP.NET TextBox est rendu, il produit:

<input type="text" />

Cependant, j'ai besoin que le rendu soit un type de numéro HTML5, comme:

<input type="number" />

Est-ce possible?

asp.nethtml5textbox
36
Curt

J'avais les mêmes exigences pour un site Web mobile utilisant ASP.NET. Après avoir trouvé aucune bonne solution, j'ai simplement essayé de définir type="number" directement sur la zone de texte. À ma surprise, il a fonctionné! Incroyable, j'ai créé un projet de test simple à vérifier. J'ai couru cette ligne de code dans chaque version .NET:

<!-- this HTML tested in each .NET version -->
<asp:TextBox runat="server" type="number" />

Voici les résultats:

<!-- 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" />

Ligne de fond: si vous utilisez ASP.NET 4.0 ou plus récent, ajoutez simplement type="number" à votre zone de texte.

55
zacharydl

Remplacer le contrôle de la zone de texte de base

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(); 
}
....
}

Ou vous pouvez vérifier celui que je viens de trouver à http://www.codeproject.com/Articles/68834/Enhanced-Textbox-Control

5
ValidfroM

La propriété TextMode est utilisée pour cela, par exemple.

<asp:TextBox ID="uPhone" CssClass="formEntry" TextMode="Phone" ClientIDMode="Static" runat="server"></asp:TextBox>

pourrait être rendu comme

<input name="ctl00$ContentPlaceHolder1$uPhone" id="uPhone" class="formEntry" type="tel">

Les modes texte en plus de [MultiLine | Mot de passe | SingleLine] ont été introduits quelque temps après VS2010 - la documentation ne me dit pas rapidement quand.

4
Andrew Morton

J'ai été capable de faire cela avec un contrôle créé dynamiquement comme ceci:

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

vous devez créer un nouveau contrôle héritant de TextBox et redéfinir le rendu, ou vous pouvez générer un extrait de code javascript pour le modifier ultérieurement.

2
lincolnk

Vous pouvez utiliser les membres du Enum TextBoxMode 

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

Ce rendu 

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

l'énumération complète est 

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
}
2
Benjamín Camacho Castro

définir type="number" dans <asp:textbox type="number" runat="server"> peu importe que cela n'apparaisse pas dans la liste, cela fonctionne

0
Marwah Abdelaal