web-dev-qa-db-ja.com

ASP.NET TextBoxをHTML5入力タイプ「Number」としてレンダリングします

ASP.NET TextBoxがレンダリングすると、以下を生成します。

<input type="text" />

ただし、代わりにHTML5数値型としてレンダリングする必要があります。

<input type="number" />

これは可能ですか？

asp.nethtml5textbox
40
Curt

ASP.NETを使用するモバイルWebサイトにも同じ要件がありました。良い解決策が見つからなかったので、単に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"テキストボックスに。

58
zacharydl

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のしばらく後に導入されました-ドキュメントはすぐに正確なタイミングを教えてくれません。

6
Andrew Morton

ベーステキストボックスコントロールをオーバーライドする

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 で見つけたものを確認できます

5
ValidfroM

このように動的に作成されたコントロールでこれを行うことができました。

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

TextBoxを継承する新しいコントロールを作成してレンダリングをオーバーライドするか、JavaScriptスニペットを生成して事後に変更する必要があります。

2
lincolnk

Enum TextBoxModeのメンバーを使用できます

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

このレンダリング

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

完全な列挙型は

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

リストに表示されていなくても、type="number"に<asp:textbox type="number" runat="server">を設定すると、驚くことに動作します

0
Marwah Abdelaal