Prevent postback on Enter in a asp.net inputfield

Question

I have a problem with the key Enter in javascript and asp.net

I have a control like this with a textchanged event which does a find but I want to control it when the user does enter

<asp:TextBox ID="TextBox1" runat="server" onkeyup="EnterEvent(event)" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged" />

That's why I created this javascript function which works very well. Because it avoids the Enter postback at any character input

    function EnterEvent(e) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if (keycode == 13) {
            return true;
        }
        else {
            return false
        }
    }

And then I wanted to control when the TextBox has content, so I changed the js like this.

    function EnterEvent(e, ctrl) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if (keycode == 13) {
            return ctrl.value.length > 2;
        }
        else {
            return false
        }
    }

The control

<asp:TextBox ID="TextBox1" runat="server" onkeyup="EnterEvent(event, this)" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged" />

But nothing happens. Anytime that I do Enter, the page postback.

I also added this in the code behind on the load page

            TextBox1.Attributes.Add("onkeypress", "EnterEvent(event, this);");
            TextBox1.Attributes.Add("onkeyup", "EnterEvent(event, this);");
            TextBox1.Attributes.Add("onkeydown", "EnterEvent(event, this);");

My page is still doing postback at Enter key. The idea is to stop the Enter postback if at least has 3 characters. Any idea or another approach?

> -----------------EDIT--------------------

I added this function before the EnterEvent

    $(function () {
        $(':text').bind('keydown', function (e) { 
            if (e.keyCode == 13) 
                e.preventDefault();
        });
    });

But it blocks the Enter in all the page. Enter doesn't work AT ALL.

> -----------------EDIT 2--------------------

Well, I succeded! As I said in a previous comment, I tried like in the past adding a dummy button control and I transfered the event from the textbox and calling its click event. It's not CLEAN AT ALL but it works and I'm in a hurry. Thank you all you guys for answering. If someone can help still I would appreciate it. I'll continue reviewing this question. Thanks.

    function EnterEvent(e, ctrl) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if (keycode == 13 && ctrl.value.length > 2) {
            $('[id$=Button1]').click();
        }
        else {
            return false;
        }
    }

<asp:TextBox ID="TextBox1" runat="server" onkeyup="EnterEvent(event, this)" />
<asp:Button ID="Button1" runat="server" OnClick="TextBox1_TextChanged" style="visibility:hidden;width:0;"/>

Answer 1

Had a similar need to prevent an enter keypress (although, I didn't need to consider the input length condition as in this case) and found this which solved the problem... simpler than adding an entire script block if all you need to do is stop the form postback due to someone pressing enter in a text area.

<asp:TextBox ID="tb_Input" runat="server" onkeypress="return event.keyCode != 13;"></asp:TextBox>

Thought I'd share this in case someone else is searching for this functionality only.

Answer 2

Try:

e.preventDefault();

to stop the Enter event.

I've built a little fiddler:

http://jsfiddle.net/rblaettler/Y3b8F/5/

Is this what you are trying to do? It only submits if you have more than 2 characters.

Answer 3

<asp:TextBox ID="TextBox1" runat="server" onkeydown="return EnterEvent(event,this);" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged" />

function EnterEvent(e, ctrl) {
            var keycode = (e.keyCode ? e.keyCode : e.which);
            if (keycode == 13 && ctrl.value.length > 2) {
                return false;
            }
            else {
                return true;
            }
        }