prevent postback from function bound with jquery

Question

I'm attempting to run some javascript code when the 'Enter' key is pressed while the focus is on a particular textbox. If this occurs, I DO NOT want the page to postback. (However, if someone clicks the Submit button, then I want the page to postback as it normally would.)

I have a page with the following content:

<script type="text/javascript">
$(function () {
    $('#txtInput').on('keyup', function (e) {
        if (e.keyCode == 13) {
            alert('enter was clicked');
            return false;
        }
    });
});
</script>

<asp:TextBox ID="txtInput" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" />

I always thought that return false; was the way to accomplish this, but in this scenario, it isn't working.

I have also tried the following in my javascript function, to no avail.

$(function () {
    $('#txtInput').on('keyup', function (e) {
        if (e.keyCode == 13) {
            e.cancel = true;
            e.returnValue = false;
            alert('enter was clicked');
        }
    });
});

My questions are:

1. Why doesn't this work?

2. How can I achieve this behavior?

it might be because of the keyup event. IN theory the key is already up, so the event already happened. Have you tried with keypress instead? — Carlos Martinez T, Feb 14 '13 at 17:44
@CarlosMartinezT, the `keypress` event, combined with `return false`, is the only thing that I can get to work. Thank you. You should post this as the answer. — Jeremy Wiggins, Feb 14 '13 at 18:46

score 1 · Accepted Answer · answered Feb 16 '13 at 16:00

You need to use the keypress event because it happens before the key is released and therefore it can be cancelled.

Quoting the comment:

It might be because of the keyup event. In theory the key is already up, so the event already happened. Have you tried with keypress instead?

adeneo · Answer 2 · 2013-02-14T17:46:53.023

0

Just tested this, and it only works with keydown events, when the key is released it's too late:

$(function () {
    $('#txtInput').on('keydown', function(e) {
        if (e.which == 13) e.preventDefault();
    });
});

FIDDLE

edited Feb 14 '13 at 17:46

answered Feb 14 '13 at 17:41

adeneo

312,895
29
395
388

Unfortunately, this isn't working for me either. The postback is still happening. – Jeremy Wiggins Feb 14 '13 at 18:34
@JeremyWiggins - Then you're doing something else wrong, as it should work just fine! – adeneo Feb 14 '13 at 18:54
I agree, but I don't see how I could be doing anything else wrong; I posted my application in it's entirety. I see that it works on your fiddle, but from an asp.net app, it still posts back. Using `keypress` instead of `keydown` seems to do the trick though. – Jeremy Wiggins Feb 14 '13 at 19:02
There's actually a difference in the returned value for `keypress` and `keydown` on many characters, but as far as I know they should both return `13` for enter. Must be something with ASP ? – adeneo Feb 14 '13 at 19:21
@Jeremy - Whoops, it's an ASP application, isn't it. Totally missed that the first time around for some reason. Yeah, you'll need to use "return false", but you might need to use it in conjunction with e.PreventDefault. Doing a little research now. – Feb 14 '13 at 19:21

score 0 · Answer 3 · edited May 23 '17 at 10:32

Have you tried using e.PreventDefault()? For this case, you may also need to use keydown or keypress to catch the default event.

<script type="text/javascript">
$(function () {
    $('#txtInput').on('keydown', function (e) {
        if (e.which == 13) {
            e.PreventDefault();
            alert('enter was clicked');
        }
    });
});
</script>

You should know, though, that by breaking keyboard functionality, you aren't catering to accessibility standards, which may make things difficult for some users. Make sure that you provide a way for keyboard-only users to navigate.

Edit: Due to the nature of your issue (ASP.NET) you might have to approach this in a different way.

You can either a) take a look at this question: Canceling the default submit button in ASP.NET or b) apply the Javascript solution above, but apply it to the entire document instead of the element.

I wouldn't suggest the second one, as it might break functionality for accessbility users.

Unfortunately, this isn't working for me either. The postback is still happening. — Jeremy Wiggins, Feb 14 '13 at 18:34

score 0 · Answer 4 · answered Feb 14 '13 at 20:07

function PreventEnterKeyInTextBox(){
$('#txtInput').keypress(function(evt){evt=(evt)?evt:window.event; 
if(evt.keyCode==13){
    if($.browser.msie)
         {evt.cancelBubble=true; evt.returnValue=false;}
    else{evt.preventDefault();}
 }});
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PreventEnterKeyInTextBox);
//Or $(document).ready(function(){PreventEnterKeyInTextBox();});

prevent postback from function bound with jquery

4 Answers4