Disable backspace in textbox via javascript

Question

I have a textbox which is extended by an Ajax Control Toolkit calendar.

I want to make it so that the user cannot edit the textbox and will have to instead use the calendar extender for input.

I have managed to block all keys except backspace!

This is what I have so far:

<asp:TextBox ID="TextBox1" runat="server" onKeyPress="javascript: return false;" onKeyDown="javascript: return false;" onPaste="javascript: return false;" />

How would I also disable backspace within the textbox using javascript?

EDIT

Made an edit since I need a solution in javascript.

EDIT

It turns out that onKeyDown="javascript: return false;" DOES work. I have no idea why it wasn't working before. I tried using a new textbox and it blocked backspaces fine. So sorry to everyone who posted an answer hoping to get some rep esp. after I marked it for bounty.

My textboxes now (seem) to block ALL keystrokes and also still work with the calendar extender.

Answer 1

As others said ReadOnly="True" will break the postback mechanism.

I believe you can get around it in your code-behind by accessing the Request object directly during PageLoad:

//assuming your textbox ID is 'txtDate'
if(Page.IsPostBack)
{
   this.txtDate.Text = Request[this.txtDate.UniqueID];
}

Your other option is to allow Disabled controls to postback on the form, but this is somewhat of a security concern as readonly fields modified via script could potentially come back:

<form id="MyForm" runat="server" SubmitDisabledControls="True">
..
</form>

http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlform.submitdisabledcontrols.aspx

I'm not sure the impact of this property on ReadOnly (vs Enabled="False") controls but it's worth trying.

And finally - I did run into the same issue you're having a few years ago, and from what I remember there is a difference between using an html input marked as readonly and runat="server", and an actual serverside control where ReadOnly="true".

I have a feeling doing:

<input type="text" readonly="readonly" runat="server" id="myTextBox" />

may have still allowed the data to come through, although in the code-behind you have to treat the control as a HtmlInputText or HtmlGenericControl vs. a TextBox. You can still access the properties you need though.

Just a few ideas anyway...

Answer 2

How about using a label for the display and a hidden textbox to get the value back to the server?

Answer 3

I was able to do something similar, with Jquery. Just putting it out here for reference!

$("#inputID").keypress(function (e)
{e.preventDefault();});

$("#inputID").keydown(function (e)
{e.preventDefault();});

the first prevents keypresses, while the second prevents key down events.

Still a JS noob, so feel free to point out good / bad things with this.

Answer 4

You need to apply readonly on the client side controller ONLY, so that asp.net doesn't see it and still reads the data on postback. You can do this several ways, one of the easier if you use jQuery is to add a class to the text-boxes eg. cssclass="readonly" in question and $(".readonly").attr("readonly", true);.