[ ASP.NET ] asp:TextBox コントロールを ReadOnly にする

ASP.NET の TextBox コントロールで ReadOnly プロパティを有効にすることで入力制限を行うことができます。なお、ReadOnly プロパティを True にした場合には、ユーザー操作による操作はできませんが、Javascript からは変更できます。

ただし、変更した内容をサーバ側で受け取ることはできません。この点に留意しておかなければいけません。以下に検証を行ったサンプルコードを掲載します。詳細はサンプル中のコメントを参照ください。

ASPX

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server" ReadOnly="True">original text</asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="TextChange" />   
    <asp:Button ID="Button2" runat="server" Text="PostBack" /> 
</div>
</form>

VB.NET

    ''' ページロード
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If (IsPostBack = True) Then Return

        ' ボタン１にテキスト変更用のスクリプトを設定する
        Dim script As String
        script = "getElementById('" + TextBox1.ClientID + "').value = 'update text'; return false;"
        Button1.Attributes.Add("onclick", script)

    End Sub

    ''' Button2 クリックによるポストバック
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click

        Dim text As String = TextBox1.Text

        ' テキストボックスが ReadOnly の場合、ブラウザ側(Javascript)で
        ' 編集してもクリックイベントでは元の値が取得される

    End Sub

C#

    /// ページロード
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack == true) { return; }

        // ボタン１にテキスト変更用のスクリプトを設定する
        string script;
        script = "getElementById('" + TextBox1.ClientID + "').value = 'update text'; return false;";
        Button1.Attributes.Add("onclick", script);
    }

    /// Button2 クリック（ポストバック）
    protected void Button2_Click(object sender, EventArgs e)
    {
        string text  = TextBox1.Text;

        // テキストボックスが ReadOnly の場合、ブラウザ側(Javascript)で
        // 編集してもクリックイベントでは元の値が取得される
    }

制約を回避したい場合

どうしてもこの制約を回避したい場合は、TextBox の ReadOnly プロパティを無効にして、ページロード( Page_Load )イベントで以下のように readonly 属性を直接埋め込みます。これで、Javascript での修正内容がポストバック時にサーバ側で取得できるようになります。

サンプルコード（変更点のみ）

ASPX

    <asp:TextBox ID="TextBox1" runat="server" ReadOnly="False">original text</asp:TextBox>

VB.NET

    ' 直接属性を追加する
    TextBox1.Attributes.Add("readonly", "true")

C#

    // 直接属性を追加する
    TextBox1.Attributes.Add("readonly", "true");

ただし、下記の参考リンクに記載のあるとおり、セキュリティ上の観点からは推奨できません。

参考

• TextBox.ReadOnly プロパティ

この例には、ユーザー入力を受け付けるテキスト ボックスがあります。これにより、セキュリティが脆弱になる可能性があります。既定では、ASP.NET Web ページによって、ユーザー入力にスクリプトまたは HTML 要素が含まれていないかどうかが検証されます。詳細については、「スクリプトによる攻略の概要」を参照してください。