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

Can't you just use the HTML readonly="readonly" attribute?

<input type="text" name="country" value="Norway"   readonly="readonly" />

<textarea rows="3" cols="25" readonly="readonly">
It should work! :)
</textarea>

Answer 2

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

Answer 3

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 4

here is a possible solution... add an event listener...

<asp:TextBox ID="TextBox1" runat="server" onKeyPress="KeyCheck;" />

and then the function can be like this..

function KeyCheck(e) {
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 if (KeyID == 8 ) {
    alert('no backspaces!!);
 }
}

doubt if it has to be onkeypress or onkeyup...

Answer 5

ZX12R was close. This is the correct solution:

The TextBox is like this:

    <asp:TextBox ID="TextBox1" runat="server" onKeyDown="preventBackspace();"></asp:TextBox>

and the script looks like this:

<script type="text/javascript">
    function preventBackspace(e) {
        var evt = e || window.event;
        if (evt) {
            var keyCode = evt.charCode || evt.keyCode;
            if (keyCode === 8) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }
            }
        }
    }
</script>

First of all, the backspace wont come through on Key Press, so you have to use Key Down.

Answer 6

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);.

Answer 7

ReadOnly attribute does not help. The backspace still is taking your browser to back page even if your text box is read only..