Postback disabled/readonly Textbox that was modified in JavaScript

Let’s say in your ASP.NET application you set a TextBox control’s property ReadOnly to True (or Enabled to False) to prevent user from entering data directly. But you still want to update that text box’s value via client-side JavaScript. Which is happening, the value can be updated.  But during postback to the server – surprise, surprise! – the new value doesn’t persist. This is due to security precaution – if the value wasn’t meant to be changed – the change is not allowed. But there is a way around this.

The trick is  – to keep ReadOnly = False and Enabled = True and simulate their behavior.  Add following line of  to your server-side code:

TextBox1.Attributes("onclick") = "this.blur();"

where TextBox1 is your textbox control. What this line does is adds client-side behavior to the textbox. As soon as user tries to click the textbox, focus immediately gets lost, preventing user from entering data, making the textbox essentially read-only. For further effect you can set the texbox’s background to something like “LightGray” making it appear disabled.

7 replies on “Postback disabled/readonly Textbox that was modified in JavaScript”

  1. Instead of just click, if user selects some text from that textbox by keeping and clik pressed and leaves it after selecting few characters, then he will be able to edit it.
    Please suggest solution for this ,if any.

  2. @Krishna Kole
    Good find, thanks for pointing it out. In this case add one more attribute to the textbox:

    TextBox1.Attributes(“onselect”) = “this.blur();”

    the “onselect” event takes care of selecting characters and releasing mouse outside of the textbox.

  3. One more for ya… the user can still tab to the input control and then type or past text…. I added a TextBox1.Attributes(“onfocus”) = “this.blur();” which prevents focus on the control, however it also prevents tabbing past it, which is not ideal….

  4. @Scott , Excellent! I think “onfocus” actually is the only thing that’s needed, it replaces all other handlers. And if we need to tab pass “disabled” control we can locate next sibling that is selectable and set focus on it.

  5. I know this post is nearly 2 years old but I figured I would share my recent discovery. From what I can tell, a TextBox’s value will not survive postback only if it is declared as Read-Only when it is initially defined on the aspx page.

    My solution was to leave the TextBox ReadOnly=false and then in javascript do the following:

    window.onload = function () {
    document.getElementById(“TextBox1”).readOnly = true;
    }

    This way, the TextBox value will persist across postbacks but will be readOnly to the user.

  6. @Another Yuriy: Better late than never, very interesting find! Спасибо 🙂

  7. Thanks! It was very helpfull.

    My solution:

    txtBillEmail.ReadOnly = true;
    txtBillEmail.Enabled = false;

Leave a Reply