SYSK 118: ReadOnly or ContentEditable?


Consider this:  you want a text box on a web page to be not editable by the user, but you want to be able to change the text box’s contents in client side script and see the updated text on the server.


 


Did you know that if you set TextBox1.ReadOnly = true, the value set by the client side script will not be visible on the server?    Try it for yourself… Here is the code:


 


<form id=”form1″ runat=”server”>


    <div>


        <input id=”Button2″ type=”button” value=”Change Text via Client-Side Script” onclick=”ChangeText();” />


    </div>


    <asp:TextBox ID=”TextBox1″ runat=”server”>initial text</asp:TextBox>


    <asp:Button ID=”Button1″ runat=”server” OnClick=”Button1_Click” Text=”See Value on the Server-Side” />


</form>


 


<script language=”javascript” type=”text/javascript”>


<!–


function ChangeText()


{   


    form1[“TextBox1”].setAttribute(“innerText”, “abc”);


}   


–>    


</script>


 


 


public partial class MyForm : System.Web.UI.Page


{


    protected void Page_Load(object sender, EventArgs e)


    {           


        TextBox1.ReadOnly = true;


    }


 


    protected void Button1_Click(object sender, EventArgs e)


    {


        Response.Write(TextBox1.Text + “<br>”);


       


    }


}


 


However, if instead of setting TextBox1.ReadOnly property you set ContentEditable attribute to false, you’ll get the behavior you’re looking for:


TextBox1.Attributes[“contentEditable”] = “false”;


 


 


Special thanks to Vinay Kumar Baliyan who replied with the information used in this post to Les Cardinal‘s question.


 

Comments (11)

  1. Anonymous says:

    Wow, the behavior has changed. On 1.*, ReadOnly TextBox works fine

  2. shw586 says:

    有时候,我们不希望用户直接编辑TextBox,而是希望通过客户端脚本的方式来设置内容,一般的做法是设置TextBox的属性ReadOnly为true。但在ASP.NET 2.0里有了变化,设置了ReadOnly为true的TextBox,在服务器端不能通过Text属性获取在客户端设置的新内容

  3. myrat says:

    Then you might as well stick to readonly, but use

    TextBox1.Attributes("Readonly") = "readonly"

    instead.

    contentEditable is not supported by all browers.

  4. pingo says:

    ASP.NET 2.0中ReadOnly的TextBox

  5. txd_lf says:

    TextBox1.Attributes[“readonly”] = “true”;

    这样不是更方便

  6. 宝宝多多 says:

    [来源:AppDev-SYSK118]

    有时候,我们不希望用户直接编辑TextBox,而是希望通过客户端脚本的方式来设置内容,一般的做法是设置TextBox的属性ReadOnly为

    true。但…

  7. 斌哥 says:

    [来源:AppDev-SYSK118]有时候,我们不希望用户直接编辑TextBox,而是希望通过客户端脚本的方式来设置内容,一般的做法是设置TextBox的属性ReadOnly为true。但在AS…

  8. xjb says:

    今天转一个asp.net程序从vs2003到vs2005,老报错,postback后取不到textbox控件的改变的值,在vs2003下完全正常,在vs2005下就是不行,搞了一上午都不知为啥,于是上…

  9. Daniel Lourenço Curado says:

    Thanks for help us is this strange behavior.

    Very god solution and works so fine.